شبه کلاس (یا 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
