شبه کلاس در CSS

شبه کلاس (یا Pseudo Class) ها در CSS عباراتی هستند که با اضافه شدن به سلکتورهای عادی (یا در حالت تنها)، وضعیت خاصی از المان‌ها را مشخص می‌کنند. به عبارت بهتر با وجود شبه کلاس، زمانی المان های موردنظر توسط سلکتور انتخاب می‌شوند که در وضعیت مشخص شده قرار داشته باشند. برای مثال با ترکیب سلکتورهای معمولی و شبه کلاس ها می‌توان لینکی که نشانگر ماوس روی آن قرار گرفته، لینک‌های ملاقات شده یا پاراگراف هایی که اولین فرزند والدشان هستند را برای تعیین استایل هدف قرار داد.

بیشتر بخوانید: آشنایی با سلکتورها و انواع آن‌ها در CSS

شیوه استفاده از شبه کلاس ها در CSS

سینتکس کلی سلکتور شبه کلاس در سی‌اس‌اس مشابه با نمونه ساده زیر است. همانطور که مشاهده می‌کنید برای درج شبه کلاس ها پیش از عنوان شبه کلاس، یک کاراکتر کلن (یا :) قرار می‌گیرد.

selector:pseudo-class {
  ...
}

به عنوان مثال سلکتور زیر لینکی را انتخاب می‌کند که نشانگر ماوس روی آن قرار گرفته است. با توجه به بخش اظهاریه در این مثال، هنگام قرارگیری نشانگر ماوس روی هر لینک، رنگ متن آن قرمز خواهد شد.

a:hover {
  color: red;
}

تفاوت شبه کلاس با شبه المان

برخلاف شبه کلاس ها که المان هایی در یک وضعیت خاص را انتخاب می‌کنند شبه المان (یا Pseudo Element) ها بخشی از المان‌ها را برای تعیین استایل انتخاب می‌کنند. برای مثال شبه المان ها می‌توانند خط اول یا حرف اول یک پاراگراف را انتخاب کنند یا بخشی از متن پاراگراف که توسط کاربر انتخاب شده را هدف قرار دهند.

بیشتر بخوانید: آشنایی با شبه المان ها در CSS

شبه کلاس های متداول در CSS

شبه کلاس های پرکاربرد برای لینک ها

لینک ها یا المان های <a> یکی از رایج‌ترین المان‌هایی هستند که برای انتخابشان در وضعیت‌های مختلف از شبه کلاس ها استفاده می‌شود. در CSS چهار شبه کلاس زیر کاربرد فراوانی برای وضعیت‌های مختلف لینک ها دارند:

شبه کلاس	سلکتور مثال	مفهوم سلکتور مثال
:link	a:link	تمام لینک های ویزیت (یا ملاقات) نشده را انتخاب می‌کند.
:visited	a:visited	تمام لینک های ویزیت (یا ملاقات) شده را انتخاب می‌کند.
:hover	a:hover	لینکی که نشانگر ماوس روی آن قرار دارد را انتخاب می‌کند.
:active	a:active	لینک فعال را انتخاب می‌کند.

شبه کلاس‌های پرکاربرد مرتبط با المان های <input>

شبه کلاس	سلکتور مثال	مفهوم سلکتور مثال
:checked	input:checked	انتخاب تمام المان‌های <input> تیک خورده
:disabled	input:disabled	انتخاب تمام المان‌های <input> غیرفعال
:enabled	input:enabled	انتخاب تمام المان‌های <input> فعال
:focus	input:focus	انتخاب تمام المان‌های <input> که فوکس را در اختیار دارند.
:in-range	input:in-range	انتخاب تمام المان‌های <input> که مقدارشان در بازه مشخص شده قرار دارد.
:invalid	input:invalid	انتخاب تمام المان‌های <input> که مقدارشان نامعتبر است.
: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 (اجباری) هستند.
:valid	input:valid	انتخاب تمام المان‌های <input> که مقدارشان معتبر است.

سایر شبه کلاس های رایج در سی اس اس

شبه کلاس	سلکتور مثال	مفهوم سلکتور مثال
:empty	p:empty	انتخاب تمام المان‌های <p> بدون فرزند
:first-child	p:first-child	انتخاب تمام المان‌های <p> که فرزند اول والدشان هستند.
:first-of-type	p:first-of-type	انتخاب تمام المان‌های <p> که اولین المان <p> والدشان هستند.
:lang(language)	p:lang(it)	انتخاب تمام المان‌های <p> که خصوصیت lang در آن‌ها با it شروع می‌شود.
:last-child	p:last-child	انتخاب تمام المان‌های <p> که فرزند آخر والدشان هستند.
:last-of-type	p:last-of-type	انتخاب تمام المان‌های <p> که آخرین المان <p> والدشان هستند.
:not(selector)	: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> که تنها فرزند والدشان هستند.
:root	:root	انتخاب المان ریشه سند
:target	#myid:target	انتخاب المانی با آی‌دی myid فعال (به این معنی که فرگمنت نشانی صفحه با این آی‌دی مطابقت دارد).

جزئیات بیشتر در مورد شبه کلاس‌های فوق را در قسمت‌های مجزا خواهید آموخت.

بازگشت به فهرست مجموعه آموزشی CSS