شبه کلاس در 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 (در input) در 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

آشنا شدیم.

توسعه دهندگان
احسان اسلامی