www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

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


نویسنده: میثم خوشبخت
تاریخ: ۱۳۹۳/۱۱/۲۸ ۱۸:۳۰
آدرس: www.dntips.ir
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
مطالب مشابه