Pseudo-classes در CSS

یادگیری CSS

تعداد بازدید : 3608

تاریخ و ساعت انتشار : چهار شنبه 1 شهریور 1396 01:55

از Pseudo-classes (شبه كلاس ها) براي تعريف دستورات خاصي از يك عنصر ،‌استفاده مي شود. براي مثال مي توان از Pseudo-classes براي :

استايل دهي به يك عنصر به هنگام بردن ماوس روي آن
استايل دهي متفاوت براي لينك هاي بازديد شده و بازديد نشده
استايل دهي به عنصري كه روي آن تمركز شود ( کلیک شود)

استفاده مي شود.

تركيب كد Pseudo-classes
تركيب كد براي Pseudo-classes به شرح زير مي باشد :‌
ترکیب کد شبه کلاس ها
```
selector:pseudo-class {
    property:value;
}
```
مشاهده مثال
لينك ها را مي توان به روش هاي مختلفي نمايش داد :

مثال :
نمایش لینک ها با شبه کلاس ها
```
 /* لینک مشاهده نشده */
a:link {
    color: #FF0000;
}

/* لینک مشاهده شده */
a:visited {
    color: #00FF00;
}

/* لینک اشاره شده */
a:hover {
    color: #FF00FF;
}

/* لینک انتخاب شده */
a:active {
    color: #0000FF;
} 
```
مشاهده مثال
نكته ! a:hover بايد بعد از a:link و a:visited در CSS قرار گيرد تا تاثير داشته باشد.a:active هم براي تاثير داشتن بايد بعد از a:hover قرار گيرد. نام هاي Pseudo-classes به بزرگي و كوچكي حروف حساس نيستند.

شبه كلاس ها و كلاس هاي CSS
Pseudo-classes را مي توان با كلاس هاي CSS تركيب كرد. براي مثال زماني كه ماوس را بر روي لينك در مثال زير ببريد ،‌رنگ آن تغيير مي كند.

مثال :
ترکیب کلاس ها با شبه کلاس ها
```
a.highlight:hover {
    color: #ff0000;
}
```
مشاهده مثال
ماوس بر روي <div>
مثالي براي استفاده از hover: بر روي عنصر <div> :‌
اشاره بر روی div
```
div:hover {
    background-color: blue;
}
```
مشاهده مثال
ابزار راهنماي ساده
از Pseudo-classes مي توان براي تعريف ابزار راهنمايي ساده استفاده كرد.در اين روش به هنگام بردن ماوس بر روي <div> مورد نظر ،‌ يك عنصر <p> به عنوان ابزار راهنمايي نمايش داده مي شود.

مثال :
ابزار راهنما با استفاده از اشاره
```
p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}
```
مشاهده مثال
شبه كلاس :first-child
first-child: يك عنصر مشخص كه اولين وارث از يك عنصر ديگر باشد را انتخاب مي كند.

در مثال زير ،‌ سلكتور هر عنصر <p> را كه اولين وارث از هر عنصر ديگري باشد را انتخاب مي كند.

مثال :
شبه کلاس firstchild
```
p:first-child {
    color: blue;
}
```
مشاهده مثال
انتخاب اولين عنصر <i> از تمام عناصر <p> اول
در مثال زير سلكتور ،‌ تمام عناصر <i> موجود در عناصر <p> را كه اولين وارث از والد خود هستند را انتخاب مي كند.

مثال :
اولین عنصر داخل عنصر دیگر
```
p i:first-child {
    color: blue;
}
```
مشاهده مثال
شبه كلاس lang:
شبه كلاس lang: امكان تعيين دستورهاي خاص براي زبان هاي مختلف را فراهم مي كند.

در مثال زير ،‌ lang: ،‌ براي عناصر <q> داراي lang="no" علامت كوتيشن تعيين مي كند.

مثال :
تمام عناصر مورد نظر داخل اولین عنصر
```
p:first-child i {
    color: blue;
}
```
مشاهده مثال