.NET Tips | معرفی Selector های CSS

اندازه‌ی قلم متن

تخمین مدت زمان مطالعه‌ی مطلب: شش دقیقه

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>

در مثال فوق اولین کاراکتر تگ p یعنی حرف L به اندازه xx-large نمایش می‌یابد.

پشتیبانی در مرورگرها:

					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>

در مثال فوق اولین سطر تگ 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

معرفی Selector های CSS - قسمت 3

مطالب مشابه