شبه کلاس در CSS
شبه کلاس ها (pseudo-class) در CSS می توانند، به المان در حالت خاصی، استایل دهند.
شبه کلاس با علامت دونقطه - کالُن (:) به انتهای انتخابگر اضافه می شود.
selector:pseudo-class {
property: value;
}فرض کنید یک متن با پس زمینه قرمز داریم، ولی می خواهیم در حالتی که ماوس روی متن نگه داشته شود (hover) آبی رنگ شود. در این حالت از شبه کلاس hover استفاده می کنیم:
div {
background-color: red;
}
div:hover {
background-color: blue;
}می توان از شبه کلاس نیز در کلاس استفاده کرد:
.resize:hover {
color: green;
font-size: 28px;
}با شبه کلاس ها می توان به المان های فرزند و نسل نیز استایل داد. در نمونه کد زیر به المان p که در نسل div قرار دارد استایل دهی کرده ایم.
p {
display: none;
background-color: rgb(52, 72, 243);
padding: 25px;
}
div:hover p {
display: block;
}نکته: با کمک شبه کلاس hover و استایل دهی به نسل می توان، فهرست سایت را ساخت.
شبه کلاس و پیوند در CSS
با استفاده از شبه کلاس ها می توانیم حالت های مختلف پیوند را مدیریت کنیم:
- a:link حالت عادی و پیشفرض پیوند
- a:visited پیوند بازدید شده
- a:hover نگه داشتن نشانگر ماوس روی المان
- a:hover پیوند در حال کلیک
/* حالت عادی پیوند */
a:link {
color: blue;
}
/* پیوند بازدید شده */
a:visited {
color: darkorchid;
}
/* ماوس روی پیوند */
a:hover {
color: red;
}
/* پیوند در حال کلیک */
a:active {
color: blue;
}نکته: شبه کلاس hover، حتما باید بعد از شبه کلاس link و active نوشته شود، در غیر اینصورت hover اجرا نمی شود.
نکته: شبه کلاس active، حتما باید بعد از شبه کلاس hover نوشته شود، در غیر اینصورت active اجرا نمی شود.
نکته: برای اطلاعات بیشتر، به آموزش پیوندها در CSS مراجعه کنید.
شبه کلاس :first-child و :last-child در CSS
با شبه کلاس :first-child می توان اولین المان را مشخص کرد.
p:first-child {
color: red;
}p i:first-child {
color: blue;
}p:first-child i {
color: blue;
}شبه کلاس :last-child، عملکرد مشابه first-child دارد، اما اثر گذاری آن روی آخرین المان است.
p:last-child i {
color: blue;
}شبه کلاس :nth-child() در CSS
با شبه کلاس :nth-child()، می توانیم به شماره المان مورد نظر استایل بدهیم.
p:nth-child(3) {
color: blue;
}با استفاده از مقدار odd و even نیز می توانیم به المان های فرد و زوج استایل بدهیم. از این مقدار معمولا در جدول ها و لیست ها استفاده می شود.
tr:nth-child(even) {
background-color: #eeefee;
}نکته: برای اطلاعات بیشتر، به آموزش سبک جدول در CSS مراجعه کنید.
شبه کلاس :lang() در CSS
دستور :lang، به ما اجازه می دهد تا قوانین خاصی را برای زبان های مختلف تعریف نماییم.
p:lang(fa) {
background: red;
}شبه کلاس :focus در CSS
وقتی روی input کلیک می کنیم و در حالت انتخاب شده است، شبه کلاس focus فعال شده است. به صورت پیش فرض، مرورگرها به حالت focus اینپوت، ویژگی outline می دهند.
outline: none;نکته: برای اطلاعات بیشتر، به آموزش فرم CSS مراجعه کنید.
همه شبه کلاس های CSS در یک نگاه
انتخابگر ها |
مثال |
توضیحات مثال |
| active: | a:active | پیوند فعال را انتخاب می کند. |
| checked: | input:checked | هر المان <input> که بررسی شده باشد، را انتخاب می کند. |
| disabled: | input:disabled | هر المان <input> که غیر فعال شده باشد، را انتخاب می کند. |
| empty: | p:empty | هر المان <p>، که فرزند ندارد را انتخاب می کند. |
| enabled: | input:enabled | هر المان <input> که فعال شده باشد، را انتخاب می کند. |
| first-child: | p:first-child | هر المان <p> که اولین فرزند والد است را انتخاب می کند. |
| first-of-type: | p:first-of-type | هر المان <p> که اولین المان <p> والد است را انتخاب می کند. |
| focus: | input:focus | المان <input> دارای فوکوس را انتخاب می کند. |
| hover: | a:hover | پیوندهای روی ماوس را انتخاب می کند. |
| in-range: | input:in-range | المان های <input> که با مقداری در محدوده مشخص باشد را انتخاب می کند. |
| invalid: | input:invalid | تمام المان های <input> که با مقدار نامعتبر باشد را انتخاب می کند. |
| :lang | p:lang(it) | هر المان را با مقدار ویژگی lang که با "it" شروع می شود را انتخاب می کند. |
| last-child: | p:last-child | هر المان <p> که اخرین فرزند والد است را انتخاب می کند. |
| last-of-type: | p:last-of-type | هر المان <p> که اخرین المان <p> والد است را انتخاب می کند. |
| link: | a:link | همه پیوندهای بازدید نشده را انتخاب می کند. |
| not: | not(p): | هر المانی که المان <p> نیست را انتخاب می کند. |
| nth-child(n): | p:nth-child(2) | هر المان <p> که دومین فرزند والد است را انتخاب می کند. |
| nth-last-child(n): | p:nth-last-child(2) | هر المان <p> را که فرزند دوم والد است را انتخاب می کند و از آخرین فرزند می شمارد. |
| nth-last-of-type(n): | p:nth-last-of-type(2) | هر المان <p> که دومین المان <p> والد آن است را انتخاب می کند و از آخرین فرزند می شمارد. |
| nth-of-type(n): | p:nth-of-type(2) | هر المان <p> که دومین المان <p> والد است را انتخاب می کند. |
| only-of-type: | p:only-of-type | هر المان <p> که دومین المان <p> والد است را انتخاب می کند. |
| only-child: | p:only-child | هر المان <p> که تنها فرزند والد آن است را انتخاب می کند. |
| optional: | input:optional | المان های <input> بدون ویژگی "required" را انتخاب می کند. |
| out-of-range: | input:out-of-range | المان های <input> که با مقداری خارج از محدوده مشخص باشد را انتخاب می کند. |
| read-only: | input:read-only | المان های <input> با ویژگی "readonly" مشخص را انتخاب می کند. |
| read-write: | input:read-write | المان های <input> بدون ویژگی "readonly" را انتخاب می کند. |
| required: | input:required | المان های <input> بدون ویژگی "required" مشخص را انتخاب می کند. |
| root: | root | المان ریشه سند (document's root) را انتخاب می کند. |
| target: | news:target# | المان news# فعال فعلی را انتخاب می کند. (روی URL حاوی نام لنگر کلیک می شود.) |
| valid: | input:valid | تمام المان های <input> که با مقدار معتبر باشد را انتخاب می کند. |
| visited: | a:visited | همه پیوندهای بازدید شده را انتخاب می کند. |
خلاصه درس
در این درس با شبه کلاس (pseudo-class) در CSS:
- شبه کلاس و پیوند
- شبه کلاس first-child: و last-child:
- شبه کلاس ()nth-child:
- شبه کلاس ()lang:
- شبه کلاس focus: در input
آشنا شدیم.
احسان اسلامی
