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 |