Pseudo-classes در CSS
یادگیری CSS
تعداد بازدید :
4690
تاریخ و ساعت انتشار :
چهار شنبه 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; }
نظر شما
>