شبه کلاس ها (Pseudo-classes)
«شبه کلاس (Pseudo-class)» یک پسوند برای انتخاب گر است. این پسوند وضعیتِ خاصِ عنصر را هدف می گیرد؛ مثل وقتی لینک «هاور» می شود یا ورودی «فوکوس» می گیرد.
نحوه نوشتن شبه کلاس
همیشه بعد از انتخاب گر، یک دونقطه می آید و سپس نام شبه کلاس.
selector:pseudo-class-name {
/* CSS properties */
}
شبه کلاس های لینک ها
برای لینک ها، معمولاً از :link ،:visited ،:hover و :active استفاده می کنیم.
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}
نکته: ترتیب رعایت شود: link → visited → hover → active.
هاور (:hover) روی یک div
هاور یعنی وقتی ماوس روی عنصر می رود. پس زمینه را عوض می کنیم.
div:hover {
background-color: blue;
}
فوکوس (:focus) روی input
فوکوس یعنی عنصر فعال شده است. معمولاً با کلیک یا تب.
input:focus {
background-color: yellow;
}
ترکیب کلاس و شبه کلاس
می توان کلاس را با شبه کلاس قید زد؛ دقیق و تمیز.
a.highlight:hover {
color: #ff0000;
}
هاورِ ساده با تولتیپ
با :hover می توان نمایش یک متن کمکی را کنترل کرد.
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
فرزند اول (:first-child)
اگر عنصری اولین فرزند والد باشد، می توانیم جدا استایل بدهیم.
p:first-child {
color: blue;
}
اولین em داخل هر p
این بار، اولین em در هر p را هدف می گیریم.
p em:first-child {
color: blue;
}
همه em در pِ فرزند اول
اینجا pهایِ فرزند اول را می گیریم، سپس همه emهای داخل.
p:first-child em {
color: blue;
}
زبان (:lang())
با :lang() می توان بر اساس زبانِ محتوا استایل داد.
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
<p>متن <q lang="no">یک نقل قول</q> نمونه.</p>
نکته: برای هدف گیری رابطه ها، صفحه ترکیب کننده ها را ببین. برای محتواهای مجازی، شبه المان ها مناسب است.
جمع بندی سریع
- :hover برای حالت ماوس روی عنصر.
- :focus برای عنصر فعال.
- :link/:visited برای وضعیت لینک.
- :first-child برای اولین فرزند.
- :lang() برای زبانِ محتوا.