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