Pseudo Class
به Selector هایی که با : آغاز میشوند Pseudo Class یا کلاس‌های کاذب گفته میشود.
20- :link
تمامی تگهای a را انتخاب میکند که لینک می‌باشند یا به عبارتی دارای ویژگی href هستند.
<style>
:link {
color: red;
}
</style>
<a href="page1.html">Link 1</a>
<a>Link 2</a>
<a href="page2.html">Link 3</a> در مثال فوق Link 1 و Link 3 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :link | 1 |
21- :visited
تمامی تگهای a را انتخاب میکند که قبلا مشاهده یا بازدید شده اند.
<style>
:visited {
color: green;
}
</style>
<a href="page1.html">Link 1</a>
<a>Link 2</a>
<a href="page2.html">Link 3</a> در مثال فوق یکبار بر روی Link 1 و Link 3 کلیک نمایید تا صفحه‌ی مورد نظر باز شود. سپس مجددا به همین صفحه بازگردید و مشاهده نمایید که Link 1 یا Link 3 یا هردو به رنگ سبز نمایش می‌یابند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :visited | 1 |
22- :focus
المنتی را انتخاب میکند که در حال حاضر فعال می‌باشند یا اصطلاحا فوکوس (Focus) بر روی آن قرار دارد.
<style>
:focus {
background: yellow;
}
</style>
<input type="text"/>
<input type="password"/>
<input type="text" /> در مثال فوق با فشردن Tab بر روی inputها حرکت کنید و مشاهده نمایید که رنگ پس زمینه‌ی آنها به رنگ زرد تغییر می‌کنند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 8.0 | 2.0 | 4.0 | :focus | 2 |
23- :hover
المنتی را انتخاب میکند که در حال حاضر ماوس (Mouse) بر روی آن قرار دارد.
<style>
input:hover {
background: yellow;
}
</style>
<input type="text" />
<input type="password" />
<input type="text" /> در مثال فوق ماوس را بر روی المنتها قرار دهید و مشاهده نمایید که رنگ پس زمینه‌ی آنها به رنگ زرد تغییر می‌کنند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :hover | 1 |
24- :active
المنتی را انتخاب میکند که با ماوس بر روی آن کلیک شده باشد.
<style>
button:active {
background: yellow;
}
</style>
<button>Button 1</button>
<button>Button 2</button> در مثال فوق بر روی Button 1 یا Button 2 کلیک نمایید و دکمه‌ی ماوس را پایین نگه دارید و مشاهده نمایید تا زمانیکه کلید ماوس در حالت فشرده قرار دارد رنگ پس زمینه‌ی آنها به رنگ زرد نمایش می‌یابند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 7.0 | 2.0 | 4.0 | :active | 1 |
25- :target
توسط تگ a و با استفاده از ویژگی name می‌توان بخشی از صفحه را نامگذاری نمود. سپس می‌توان توسط تگهای a به این نقطه از صفحه ارجاع داد. به این صورت که نام آن بخش از صفحه را با پیشوند # در ویژگی href تگ a ذکر نمود، تا لینک ما را به بخشی از یک صفحه منتقل کند. این Selector در زمان کلیک شدن بر روی تگ a که دارای href می‌باشد، آن تگ a که دارای ویژگی name می‌باشد را انتخاب می‌نماید.
<style>
:target {
color: green;
}
</style>
<h2><a href="#part1">Link 1</a></h2>
<h2><a href="#part2">Link 2</a></h2>
<p>This is a paragraph</p>
<h1><a name="part1">Part 1</a></h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p>
<h1><a name="part2">Part 2</a></h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p> در مثال فوق با کلیک بر روی Link 1 و Link 2 تگهای a مقصد با عنوان Part 1 و Part2 به رنگ سبز نمایش می‌یابند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :target | 3 |
26- :first-letter
اولین کاراکتر موجود در محتوای یک تگ را انتخاب می‌نماید.
<style>
:first-letter {
font-size: xx-large;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo
magna eros quis urna.
</p> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 1.0 | 7.0 | 9.0 | 1.0 | 1.0 | :first-letter | 1 |
27- :first-line
اولین سطر موجود در محتوای یک تگ را انتخاب می‌نماید.
<style>
:first-line {
color: red;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas porttitor congue massa. Fusce posuere,
magna sed pulvinar ultricies,
purus lectus malesuada libero, sit amet commodo magna eros
quis urna. Nunc viverra imperdiet enim. Fusce est.
Vivamus a tellus. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Proin pharetra
nonummy pede. Mauris et orci. Aenean nec lorem.
</p> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 1.0 | 7.0 | 9.0 | 1.0 | 1.0 | :first-letter | 1 |
28- :empty
تگ هایی را انتخاب میکند که هیچ محتوایی ندارند و خالی می‌باشند.
<style>
:empty {
background: gray;
}
</style>
<table border="1" cellpadding="10" cellspacing="10">
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>C</td>
<td></td>
<td>D</td>
</tr>
<tr>
<td></td>
<td>E</td>
<td>F</td>
</tr>
</table> پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.2 | 9.6 | 9.0 | 3.5 | 4.0 | :target | 3 |
29- :dir(direction)
تگ هایی را انتخاب می‌نماید که دارای ویژگی dir با یک مقدار خاص می‌باشند.
<style>
:dir(rtl) {
color: red;
}
</style>
<div dir="rtl">متن 1</div>
<div>متن 2</div> در مثال فوق "متن 1" به رنگ قرمز نمایش می‌یابد.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :dir(direction) | 4 |
30- :lang(language1, language2,...)
تگ هایی را انتخاب میکند که دارای ویژگی lang با یک مقدار خاص می‌باشند. می‌توان 1 یا چند زبان را در این Selector مشخص نمود.
<style>
:lang(en) {
color: red;
}
</style>
<div lang="en">Text 1</div>
<div>Text 2</div>
<div lang="en">Text 3</div> در مثال فوق Text 1 و Text 3 به رنگ قرمز نمایش می‌یابند.
پشتیبانی در مرورگرها:
| | | | | | Selector | نسخه CSS |
| 3.1 | 9.6 | 8.0 | 2.0 | 4.0 | :lang(language1) | 2 |
| | | | | | Selector | نسخه CSS |
| No | No | No | No | No | :lang(language1, language2,...) | 4 |
