1- .class
در مثال فوق Text 1 و Text 3 به رنگ قرمز و Text 4 به رنگ آبی نمایش می‌یابند.
2- #id
در مثال فوق محتوای کادر رمز عبور به رنگ قرمز نمایش می‌یابد.
3- E
در مثال فوق Text 1 و Text 3 به رنگ قرمز نمایش می‌یابند.
4- *
در مثال فوق رنگ متن تمامی تگهای فوق قرمز خواهد شد.
5- S1 S2
در مثال فوق Text 2، Text 3 و Text 5 به رنگ قرمز نمایش می‌یابند.
6- S1>S2
در مثال فوق Text 2 و Text 5 به رنگ قرمز نمایش می‌یابند.
7- S1+S2
در مثال فوق Text 2 و Text 6 به رنگ قرمز نمایش می‌یابند.
8- S1~S2
در مثال فوق Text 4 و Text 6 به رنگ قرمز نمایش می‌یابند.
9- S1!>S2
در مثال فوق کادری قرمز رنگ را دور آن div که شامل محتوای Text 2، Text 3 و Text 4 می‌باشد، ترسیم خواهد نمود.
10- S1 /attribute/ S2
در مثال فوق، اولین تگ input که id آن user می‌باشد و توسط تگ label و با استفاده از ویژگی for (به id تگ input) ارجاع داده شده است، انتخاب و محتوای آن قرمز میشود.
این Selector تگ‌هایی را انتخاب می‌نماید که عضو یک کلاس خاص باشند.
<style>
.first{ color: red}
.content{color:blue}
</style>
<div class="first">Text 1</div>
<div>Text 2</div>
<p class="first">Text 3</p>
<div class="content">Text 4</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | Yes | Yes | Yes | .class | 1 |
2- #id
این Selector تگی را انتخاب می‌کند که دارای یک id خاص می‌باشد.
<style>
#pass {
color: red;
}
</style>
<input type="password" id="pass"/> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | Yes | Yes | Yes | #id | 1 |
3- E
جهت انتخاب تگ‌ها براساس عنوان آنها استفاده میشود.
<style>
div {
color: red;
}
</style>
<div>Text 1</div>
<p>Text 2</p>
<div>Text 3</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | Yes | Yes | Yes | E | 1 |
4- *
این Selector تمامی تگ‌ها را انتخاب می‌نماید
<style>
* {
color: red;
}
</style>
<div>Text 1</div>
<input type="text" value="Text 2"/>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | * | 2 |
5- S1 S2
تمامی المنت‌های S2 که فرزند S1 می‌باشند، انتخاب خواهند شد.
<style>
div span {
color:red
}
</style>
<div>
<h1>Text 1</h1>
<span>Text 2</span>
<p>
<span>Text 3</span>
<div>Text 4</div>
</p>
<span>Text 5</span>
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | Yes | Yes | Yes | S1 S2 | 1 |
6- S1>S2
تمامی المنت‌های S2 که فرزند مستقیم S1 می‌باشند، انتخاب خواهند شد.
<style>
div>span {
color:red
}
</style>
<div>
<h1>Text 1</h1>
<span>Text 2</span>
<p>
<span>Text 3</span>
<div>Text 4</div>
</p>
<span>Text 5</span>
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | 7.0 | Yes | Yes | S1>S2 | 2 |
7- S1+S2
تمامی المنت‌های S2 که هم تراز S1 و دقیقا بعد از S1 قرار گرفته اند را انتخاب می‌نماید.
<style>
h1+p {
color: red;
}
</style>
<div>
<h1>Text 1</h1>
<p>Text 2</p>
<div>Text 3</div>
<p>Text 4</p>
<h1>
<p>Text 5</p>
</h1>
<p>Text 6</p>
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| Yes | Yes | 7.0 | Yes | Yes | S1+S2 | 2 |
8- S1~S2
تمامی المنت‌های S2 که هم تراز S1 می‌باشند و بعد از S1 قرار گرفته اند را انتخاب می‌نماید.
<style>
div ~ p {
color: red;
}
</style>
<div>
<h1>Text 1</h1>
<p>Text 2</p>
<div>Text 3</div>
<p>Text 4</p>
<h1>
<p>Text 5</p>
</h1>
<p>Text 6</p>
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 7.0 | 3.5 | 4.0 | S1~S2 | 3 |
9- S1!>S2
این Selector المنت‌های S1 را انتخاب می‌کند که والد مستقیم S2 می‌باشند.
<style>
div!>span {
border: 1px solid red;
}
</style>
<div>
<h1>Text 1</h1>
<div>
<span>Text 2</span>
<h1>Text 3</h1>
<p>Text 4</p>
</div>
<div>Text 5</div>
</div> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | S1!>S2 | 4 |
10- S1 /attribute/ S2
تمامی المنت‌های S2 انتخاب می‌شوند که توسط یک attribute از S1 به id المنت S2 ارجاع داده است.
<style>
label /for/ input {
color: red;
}
</style>
<label for="user">User Name:</label>
<input type="text" id="user"/>
<label>Password:</label>
<input type="password" id="pass"/> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | S1 /attribute/ S2 | 4 |
