راهنمای جامع شبه‌کلاس‌ها (Pseudo-classes) در CSS
در ادامه این مقاله، شبه‌کلاس‌های CSS را در چند بخش و بر اساس کاربرد و نوع عملکرد آن‌ها بررسی خواهیم کرد. برای هر گروه، نحوه عملکرد شبه‌کلاس‌ها به همراه نمونه‌کدهای عملی توضیح داده خواهد شد.
شبه‌کلاس CSS چیست؟
شبه‌کلاس در CSS انتخابگری ویژه است که برای استایل‌دهی به یک عنصر در وضعیت (State) خاصی استفاده میشود.
سینتکس کلیدی شبه‌کلاس‌ها :
selector:pseudo-class {
property: value;
}بخش اول: شبه‌کلاس‌های تعاملی
این دسته از شبه کلاس ها به شما اجازه می‌دهند به رفتارهای لحظه‌ای کاربر مانند حرکت موس یا فشردن کلیدهای کیبورد پاسخ بصری دهید.
شبه کلاس hover
این pseudo-class زمانی عنصری را هدف قرار می‌دهد که نشانگر pointing device، مانند ماوس، روی آن قرار گرفته باشد.
برای مثال:
.product-card:hover {
box-shadow: 10px 10px 10px 10px yellow;
}
شبه کلاس hover
active شبه کلاس
active برای زمانی استفاده میشود که یک عنصر در حال فعال‌شدن در نتیجه تعامل کاربر است. برای مثال اگر داشته باشیم:
button:active {
transform: scale(0.95);
}وقتی کاربر دکمه را فعال می‌کند، اندازه‌ی آن کمی کوچک میشود.
focus شبه کلاس
وقتی یک عنصر قابلیت دریافت focus داشته باشد ، می‌توان با شبه کلاس focus ظاهر آن را تغییر داد.
برای مثال اگر در HTML داشته باشیم:
<"نام خود را وارد کنید"=input type="text" placeholder>برای CSS میتوانیم بنویسیم:
input:focus {
border: 2px solid blue;
}
شبه‌کلاس focus
شبه کلاس focus-visible
شبه کلاس focus-visible شبیه شبه کلاس focus است، اما برای شرایطی طراحی شده است که نمایش بصری focus برای کاربر اهمیت دارد.
برای مثال:
button:focus-visible {
outline: 3px solid blue;
}شبه کلاس focus-within
شبه کلاس focus-within زمانی یک عنصر را انتخاب می‌کند که خود عنصر یا یکی از عناصر داخل آن در حالت focus باشد.
برای مثال:
.form-group:focus-within {
border: 2px solid blue;
}HTML:
<div class="form-group">
<label>Name</label>
<input type="text">
</div>در اینجا زمانی که input در حالت focus قرار بگیرد، form-group. نیز با شبه کلاس focus-within قابل هدف قرار دادن است.
بخش دوم: شبه‌کلاس‌های مربوط به لینک و موقعیت
شبه کلاس visited
شبه کلاس visited برای لینک‌هایی استفاده میشود که کاربر قبلاً از آن‌ها بازدید کرده است. بعد از اینکه کاربر لینک را بازدید کرد، می‌توان ظاهر آن را متفاوت کرد.
<a href="https://example.com">Visit website</a>
a:visited {
color: purple;
}
شبه کلاس link
شبه کلاس link لینک‌هایی را هدف قرار می‌دهد که هنوز بازدید نشده‌اند.
برای مثال:
a:link {
color: blue;
}شبه کلاس any-link
شبه کلاس any-link تمام لینک‌هایی را انتخاب می‌کند که دارای href هستند؛ یعنی هم لینک‌های بازدیدنشده و هم لینک‌های بازدیدشده.
مثال:
a:any-link {
text-decoration: none;
}شبه‌کلاس local-link
شبه‌کلاس local-link برای انتخاب لینک‌هایی استفاده میشود که مقصد آن‌ها با URL سند فعلی یکسان است.
این قابلیت در حال حاضر Experimental است و طبق MDN، مرورگرها هنوز از آن به‌صورت عمومی پشتیبانی نمی‌کنند.
مثال:
<nav>
<a href="/home">خانه</a>
<a href="/about">درباره ما</a>
<a href="/contact">تماس با ما</a>
</nav>
a:local-link {
font-weight: bold;
text-decoration: underline;
}شبه کلاس target
target عنصری را انتخاب می‌کند که شناسه آن با بخش Fragment موجود در URL مطابقت دارد؛ در این مثال با کلیک روی لینک، بخش جزئیات استایل متفاوت میگیرد.
<a href="#details">مشاهده جزئیات</a>
<section id="details">
<h2>جزئیات محصول</h2>
<p>اطلاعات کامل محصول در این بخش قرار دارد</p>
</section>
#details {
padding: 20px;
}
#details:target {
background: #fff3b0;
border: 2px solid #e0b000;
}
شبه‌کلاس target
شبه کلاس scope
scope به عنصر یا محدوده‌ای اشاره می‌کند که selector در چارچوب آن ارزیابی میشود.
برای مثال: فقط المنت‌هایی که مستقیماً داخل یک container هستند و کلاس item دارند،
margin: 10px می‌گیرند.
@scope (.container) {
:scope > .item {
margin: 10px;
}
}
بخش سوم: شبه‌کلاس‌های ساختاری
این دسته‌بندی امکان انتخاب عناصر را بر اساس موقعیت آن‌ها در ساختار DOM (رابطه والد-فرزندی) فراهم می‌سازد.
شبه کلاس root
شبه کلاس root عنصر ریشه‌ای سند را انتخاب می‌کند.در یک سند HTML، عنصر ریشه معمولاً <html> است.
برای مثال:
:root {
--main-color: blue;
}شبه کلاس empty
شبه کلاس empty عنصری را انتخاب می‌کند که هیچ عنصر فرزند یا محتوای متنی غیرسفید نداشته باشد. وجود متن واقعی باعث میشود عنصر دیگر :empty نباشد، اما whitespace-only می‌تواند همچنان با شبه کلاس empty مطابقت داشته باشد.
برای مثال:
div:empty {
display: none;
}شبه کلاس first-child
شبه کلاس first-child عنصری را انتخاب می‌کند که اولین فرزند والد خود باشد.
برای مثال اگر در html داشته باشیم:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>می‌توان اولین li را این‌گونه انتخاب کرد:
li:first-child {
color:red;
}
شبه کلاس last-child
last-child آخرین فرزند والد را انتخاب می‌کند. برای مثال در لیست بالا میتوانیم داشته باشیم:
li:last-child {
margin-bottom: 0;
}شبه کلاس ()nth-child
این pseudo-class به ما اجازه می‌دهد عنصر را بر اساس موقعیت آن در میان فرزندان والد انتخاب کنیم. برای مثال اگر در HTML و CSS به ترتیب داشته باشیم :
<ul>
<li>محصول ۱</li>
<li style="width: 200px;">محصول ۲</li>
<li>محصول ۳</li>
<li>محصول ۴</li>
<li>محصول ۵</li>
<li>محصول ۶</li>
</ul>
li:nth-child(2) {
color: yellow;
}
در اینجا دومین فرزند انتخاب میشود.
شبه کلاس ()nth-child
انتخاب عناصر زوج و فرد:
keywords آماده‌ای مانند odd و even وجود دارند:
li:nth-child(even) {
background-color: lightgray;
}
li:nth-child(odd) {
background-color: white;
}شبه کلاس ()nth-last-child
()nth-last-child شبیه :()nth-child است، اما شمارش عناصر را از آخر به اول انجام می‌دهد.
برای مثال:
li:nth-last-child(2) {
color: red;
}در اینجا دومین li از انتهای لیست انتخاب میشود.
اگر HTML به شکل زیر باشد:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>عبارت li:nth-last-child(2) عنصر JavaScript را انتخاب می‌کند.
only-child شبه کلاس
only-child زمانی یک عنصر را انتخاب می‌کند که تنها فرزند والد خود باشد. بنابراین اگر والد حتی یک فرزند دیگر از نوع متفاوت داشته باشد، این pseudo-class اعمال نمی‌شود.
p:only-child {
color: blue;
}first-of-type شبه کلاس
first-of-typeاولین عنصر از یک نوع مشخص را انتخاب می‌کند. برای مثال اگر چند عنصرp در یک والد وجود داشته باشد، اولین p انتخاب میشود.
p:first-of-type {
font-weight: bold;
}last-of-type شبه کلاس
این pseudo-class آخرین عنصر از نوع مشخص را انتخاب می‌کند. در اینجا آخرین p داخل والد انتخاب میشود.
p:last-of-type {
margin-bottom: 0;
}شبه کلاس ()nth-of-type
این شبه کلاس موقعیت عنصر را در میان siblingهای همان نوع عنصر بررسی می‌کند. فرض کنیم HTML ما به این صورت باشد:
<div>
<h2>Title</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>و CSS:
p:nth-of-type(2) {
color: blue;
}دومین p انتخاب میشود.
شبه کلاس ()nth-last-of-type
این شبه کلاس عناصر هم‌نوع را از انتهای والد به سمت ابتدا شمارش می‌کند. برای مثال اگر html به این صورت باشد:
<div>
<p>First</p>
<p>Second</p>
<p>Third</p>
</div>و CSS:
p:nth-last-of-type(2) {
color: red;
}p:nth-last-of-type(2) عنصر Second را انتخاب می‌کند.
شبه کلاس only-of-type
شبه کلاس only-of-type زمانی یک عنصر را انتخاب می‌کند که در میان فرزندان والد خود تنها عنصر از آن نوع باشد.
برای مثال:
p:only-of-type {
color: blue;
}اگر HTML به شکل زیر باشد:
<div>
<h2>Title</h2>
<p>Only paragraph</p>
</div>عنصرp انتخاب میشود، زیرا تنها عنصر p در آن والد است.
شبه‌کلاس heading
شبه‌کلاس heading برای انتخاب تمام عناصر عنوان HTML، یعنی h1 تا h6، استفاده میشود. این شبه‌کلاس در حال حاضر یک قابلیت جدید و آزمایشی محسوب میشود و پشتیبانی مرورگرها از آن محدود است.
:heading {
color: blue;
}در این مثال تمام عناصر h1 تا h6 که در صفحه وجود دارند انتخاب می‌شوند.
شبه‌کلاس ()heading
شبه‌کلاس ()heading نسخه تابعی شبه کلاس heading است و برای انتخاب headingها بر اساس سطح آن‌ها استفاده میشود. این قابلیت نیز در حال حاضر آزمایشی است و پشتیبانی مرورگرها از آن محدود است.
مثال:
:heading(1, 2) {
color: darkblue;
}در این مثال، headingهای سطح 1 و 2 یعنی h1 و h2 انتخاب می‌شوند.
بخش چهارم:شبه‌کلاس‌های فرم و ورودی‌ها (Form & Input Pseudo-classes)
این دسته از شبه کلاس ها برای طراحی فرم‌های تعاملی و ارائه بازخورد آنی به کاربر استفاده میشود .
شبه کلاس enabled
شبه کلاس enabled عناصر فرم را که فعال هستند انتخاب می‌کند.
برای مثال:
input:enabled {
background-color: yellow;
}شبه کلاس disabled
شبه کلاس disabled عناصر فرم را که غیرفعال هستند انتخاب می‌کند.
برای مثال:
<input type="text" placeholder="Enter your name" disabled>input:disabled {
background-color: lightgray;
}شبه کلاس read-only
شبه کلاس read-only عناصری را هدف قرار می‌دهد که مقدارشان توسط کاربر قابل ویرایش نیست.
<input type="text" value="User ID" readonly>input:read-only {
background-color: red;
}شبه کلاس read-write
شبه کلاس read-write عناصری را انتخاب می‌کند که کاربر امکان ویرایش آن‌ها را دارد.
input:read-write {
background-color: white;
}شبه کلاس placeholder-shown
شبه کلاس placeholder-shown زمانی یک input را انتخاب می‌کند که placeholder آن در حال نمایش باشد.
برای مثال:
<input type="text" placeholder="Enter your name">input:placeholder-shown {
background-color: lightgray;
}تا زمانی که placeholder نمایش داده شود، این selector روی input اعمال میشود.
شبه کلاس autofill
شبه کلاس autofill برای انتخاب فیلدهایی استفاده میشود که مرورگر آن‌ها را با اطلاعات ذخیره‌شده به‌صورت خودکار پر کرده است.
برای مثال:
input:autofill {
border: 2px solid blue;
}نکته مهم این است که ظاهر autofill ممکن است تحت تأثیر رفتار و محدودیت‌های مرورگر نیز قرار داشته باشد.
شبه کلاس default
شبه کلاس default برای انتخاب کنترل فرمی استفاده میشود که در یک گروه، به‌عنوان گزینه پیش‌فرض در نظر گرفته شده است.
برای مثال:
input:default {
outline: 2px solid blue;
}checked شبه کلاس
شبه کلاس checked برای کنترل‌هایی مانند checkbox و radio button زمانی استفاده میشود که انتخاب شده باشند.
برای مثال اگر در HTML داشته باشیم:
<input type="checkbox" id="agree">
<label for="agree"> موافق هستم</label>برای CSS می‌توان نوشت:
input:checked {
accent-color: green;
}
شبه کلاس checked
همچنین می‌توان با selector مناسب، ظاهر label را نیز بر اساس وضعیت checkbox تغییر داد:
input:checked + label {
color:red;
}در این حالت، زمانی که checkbox انتخاب شود، رنگlabel بعد از آن قرمز میشود
شبه کلاس indeterminate
شبه کلاس indeterminate زمانی استفاده میشود که وضعیت یک کنترل فرم نه کاملاً انتخاب‌شده و نه کاملاً انتخاب‌نشده باشد. برای مثال زمانی که یک checkbox اصلی باید نشان دهد که فقط بخشی از checkboxهای زیرمجموعه انتخاب شده‌اند.
مثال:
input:indeterminate {
outline: 2px solid orange;
}
شبه‌کلاس blank برای ورودی‌ها
شبه‌کلاس blank برای انتخاب کنترل‌های ورودی‌ای استفاده میشود که مقدار آن‌ها خالی است. این شبه‌کلاس در حال حاضر Experimental است و پشتیبانی مرورگرها از آن کامل نیست.
مثال:
<label for="name">نام:</label>
input:blank {
border: 2px solid red;
}شبه کلاس valid
شبه کلاس valid زمانی می‌تواند یک کنترل فرم را انتخاب کند که مقدار آن با قواعد اعتبارسنجی تعریف‌شده برای آن مطابقت داشته باشد. برای مثال اگر داشته باشیم:
<input type="email" required>
input:valid {
border: 2px solid green;
}اگر مقدار واردشده یک email معتبر باشد، می‌توان ظاهر input را تغییر داد.
شبه کلاس valid
شبه کلاس invalid
شبه کلاس invalid برعکس شبه کلاس valid است و زمانی مورد استفاده قرار میگیرد که مقدار کنترل با قواعد اعتبارسنجی مطابقت نداشته باشد.
input:invalid {
border: 2px solid red;
}برای مثال اگر یک input از نوع email باشد و مقدار نامعتبر وارد شود، این selector می‌تواند ظاهر متفاوتی ایجاد کند.
شبه کلاس user-valid
شبه کلاس user-valid زمانی یک کنترل فرم را هدف قرار می‌دهد که کاربر با آن تعامل کرده باشد و مقدار آن با قواعد اعتبارسنجی تعریف‌شده مطابقت داشته باشد.
برای مثال:
input:user-valid {
border: 2px solid green;
}شبه کلاس user-invalid
شبه کلاس user-invalid زمانی یک کنترل فرم را انتخاب می‌کند که کاربر با آن تعامل کرده باشد و مقدار واردشده با قواعد اعتبارسنجی مطابقت نداشته باشد.
برای مثال:
input:user-invalid {
border: 2px solid red;
}شبه کلاس in-range
شبه کلاس in-range زمانی اعمال میشود که مقدار ورودی در محدوده‌ی تعیین‌شده باشد.
برای مثال:
<input type="number" min="1" max="100">input:in-range {
border: 2px solid green;
}شبه کلاس out-of-range
زمانی اعمال میشود که مقدار ورودی خارج از محدوده‌ی تعیین‌شده باشد.
input:out-of-range {
border: 2px solid red;
}Required شبه کلاس
شبه کلاس required برای کنترل‌های فرمی استفاده میشود که دارای ویژگی required هستند.
می‌توان نوشت:
<input type="email" required>سپس:
input:required {
border-left: 3px solid orange;
}شبه کلاس optional
شبه کلاس optional کنترل‌هایی را انتخاب می‌کند که الزامی نیستند.
input:optional {
background-color: blue;
}اگر یک input ویژگی required نداشته باشد، می‌تواند با این selector هدف قرار گیرد.
بخش پنجم: شبه‌کلاس‌های زبانی
شبه کلاس ()lang
شبه کلاس ()lang عناصری را بر اساس زبان تعیین‌شده برای آن‌ها انتخاب می‌کند.
برای مثال:
p:lang(en) {
font-family: Arial, sans-serif;
}شبه کلاس ()dir
شبه کلاس ()dir عناصر را بر اساس جهت نوشتار انتخاب می‌کند.
برای مثال:
p:dir(rtl) {
text-align: right;
}و برای محتوای چپ‌به‌راست:
p:dir(ltr) {
text-align: left;
}بخش ششم: شبه‌کلاس‌های وضعیت نمایش
شبه کلاس open
شبه کلاس open عناصری را هدف قرار می‌دهد که در وضعیت باز قرار دارند.
این شبه‌کلاس برای برخی عناصر و قابلیت‌های HTML که دارای حالت باز و بسته هستند کاربرد دارد.
برای مثال:
details:open {
border-color: blue;
background: yellow; }
شبه‌کلاس‌های وضعیت نمایش
شبه کلاس popover-open
شبه کلاس popover-open عنصری را انتخاب می‌کند که در حال حاضر به‌عنوان یک popover باز نمایش داده میشود.
[popover]:popover-open {
border: 2px solid black;
}
این pseudo-class برای styling وضعیت باز بودن popover کاربرد دارد.
شبه کلاس modal
شبه کلاس modal عناصری را هدف قرار می‌دهد که در وضعیت modal قرار دارند؛ برای مثال dialogای که به‌صورت modal باز شده است.
dialog:modal {
border: 2px solid black;
}شبه کلاس fullscreen
شبه کلاس fullscreen عنصری را انتخاب می‌کند که در حال حاضر در حالت تمام‌صفحه (fullscreen) نمایش داده میشود.
برای مثال:
video:fullscreen {
width: 100%;
}شبه کلاس picture-in-picture
شبه کلاس picture-in-picture زمانی یک عنصر ویدئویی را هدف قرار می‌دهد که در حالت Picture-in-Picture قرار داشته باشد.
برای مثال:
video:picture-in-picture {
border: 3px solid blue;
}بخش هفتم:شبه‌کلاس‌های مربوط به وضعیت رسانه
این شبه‌کلاس‌ها به ما اجازه می‌دهند ظاهر یک عنصر را بر اساس وضعیت پخش آن تغییر دهیم.
شبه کلاس playing
شبه کلاس playing عنصری را انتخاب می‌کند که در حال پخش شدن است.
برای مثال:
video:playing {
border: 3px solid green;
}شبه کلاس paused
شبه کلاس paused زمانی یک عنصر رسانه‌ای را انتخاب می‌کند که در حالت توقف قرار داشته باشد.
برای مثال:
video:paused {
opacity: 0.6;
}seeking شبه کلاس
شبه کلاس seeking برای زمانی کاربرد دارد که کاربر در حال تغییر موقعیت پخش یک منبع رسانه‌ای باشد؛ برای مثال زمانی که کاربر نوار پیشرفت ویدئو را به نقطه دیگری منتقل می‌کند.
مثال:
video:seeking {
opacity: 0.7;
}شبه کلاس buffering
شبه کلاس buffering برای زمانی استفاده میشود که رسانه در حال دریافت یا آماده‌سازی داده برای ادامه پخش باشد.
برای مثال:
video:buffering {
opacity: 0.5;
}شبه کلاس stalled
شبه کلاس stalled زمانی یک منبع رسانه‌ای را هدف قرار می‌دهد که دریافت داده برای ادامه پخش آن متوقف شده باشد.
برای مثال:
video:stalled {
border: 3px solid orange;
}شبه کلاس muted
شبه کلاس muted رسانه‌ای را انتخاب می‌کند که صدای آن در حالت بی‌صدا (Mute) قرار دارد.
برای مثال:
video:muted {
opacity: 0.8;
}شبه کلاس volume-locked
شبه کلاس volume-locked برای رسانه‌ای استفاده میشود که کنترل میزان صدای آن توسط کاربر امکان‌پذیر نیست.
برای مثال:
video:volume-locked {
cursor: not-allowed;
}نکته: این شبه‌کلاس‌ها بیشتر برای قابلیت‌های جدید و تخصصی CSS طراحی شده‌اند و برخلاف شبه‌کلاس‌های رایجی مانند شبه کلاس های hover و focus، ممکن است هنوز در همه مرورگرها یا نسخه‌های آن‌ها پشتیبانی نشوند. بنابراین هنگام استفاده از آن‌ها، بررسی وضعیت پشتیبانی مرورگرها و در نظر گرفتن روش جایگزین برای محیط‌های ناسازگار اهمیت دارد
بخش هشتم:شبه‌کلاس‌های زمانی
برخی از شبه‌کلاس‌های CSS برای محتوایی استفاده می‌شوند که دارای مفهوم زمانی است.
شبه کلاس current
شبه کلاس current برای انتخاب محتوایی استفاده میشود که در زمان فعلی در حال اجرا یا نمایش است.
برای مثال:
:current(p, li) {
background-color: yellow;
}current قابلیتی جدید/آزمایشی است و کاربرد عملی و پشتیبانی آن محدود است
شبه کلاس past
شبه کلاس past محتوایی را انتخاب می‌کند که زمان نمایش آن گذشته است.
برای مثال:
video::cue(:past) {
opacity: 0.5;
}شبه کلاس future
شبه کلاس future محتوایی را انتخاب می‌کند که هنوز زمان نمایش یا فعال شدن آن فرا نرسیده است.
برای مثال:
video::cue(:future) {
opacity: 0.8;
}بخش نهم: شبه‌کلاس‌های مربوط به Shadow DOM و Web Components
این شبه‌کلاس‌ها به توسعه‌دهنده اجازه می‌دهند host یا بخش‌هایی از ساختار Shadow DOM را هدف قرار دهد.
شبه کلاس defined
شبه کلاس defined عناصری را انتخاب می‌کند که توسط مرورگر به‌عنوان یک عنصر تعریف‌شده شناخته می‌شوند.
مثال:
my-element:defined {
display: block;
}شبه کلاس host
شبه کلاس host برای انتخاب عنصری استفاده میشود که به‌عنوان host یک Shadow DOM عمل می‌کند.
برای مثال:
:host {
display: block;
border: 1px solid gray;
padding: 16px;
}در این مثال، style روی عنصر host مربوط به Shadow DOM اعمال میشود.
شبه کلاس ()host
شبه کلاس ()host نسخه تابعی شبه کلاس host است و امکان انتخاب host بر اساس یک selector مشخص را فراهم می‌کند.
برای مثال:
:host(.dark) {
background-color: black;
color: white;
}در این حالت، اگر host دارای کلاس dark باشد، style مشخص‌شده روی آن اعمال میشود. HTML مربوط به استفاده از این Web Component می‌تواند به شکل زیر باشد:
<my-card class="dark"></my-card>شبه کلاس ()host-context
شبه کلاس ()host-context امکان انتخاب host را بر اساس شرایط مربوط به محیط یا ancestor های آن فراهم می‌کند.
برای مثال:
:host-context(.dark-theme) {
color: white;
}در این مثال، اگر Web Component در محیطی قرار گرفته باشد که ancestor مناسب آن دارای کلاس dark-theme است، می‌توان ظاهر component را متناسب با آن تغییر داد.
شبه کلاس host-context() یک قابلیت قدیمی و Deprecated است و برای پروژه‌های جدید توصیه نمی‌شود؛ در اینجا صرفاً برای آشنایی معرفی شده است.
شبه کلاس has-slotted
:has-slotted برای بررسی وجود محتوایی استفاده میشود که از طریق slot در یک Web Component قرار گرفته است.
برای مثال:
:has-slotted {
border: 2px solid blue;
}این selector فقط داخل CSS متعلق به Shadow DOM کار می‌کند و فعلاً هم Limited Availability دارد. MDN همچنین می‌گوید حتی یک whitespace text node هم می‌تواند باعث match شدن :has-slotted شود
بخش دهم: شبه‌کلاس‌های تابعی و منطقی (Logical & Functional)
این دسته از شبه کلاس ها امکانات پیشرفته‌تری برای ساخت selectorها در اختیار توسعه‌دهنده قرار می‌دهند .
شبه کلاس ()not
این pseudo-class عناصری را انتخاب می‌کند که با selector مشخص‌شده مطابقت ندارند. در این مثال، تمام buttonهایی که class آن‌ها primary نیست، انتخاب می‌شوند.
button:not(.primary) {
background-color: gray;
}شبه کلاس ()is
شبه کلاس ()is برای ترکیب چند selector در یک selector استفاده میشود.
برای مثال به جای:
h1, h2, h3 {
color:red;
}می‌توان نوشت:
:is(h1, h2, h3) {
color:red;
}شبه کلاس ()where
شبه کلاس ()where همیشه specificity صفر ایجاد می‌کند. این ویژگی می‌تواند زمانی مفید باشد که بخواهیم یک style پایه تعریف کنیم که به‌راحتی توسط ruleهای دیگر override شود.
برای مثال اگر داشته باشیم:
:where(h1, h2, h3) {
margin-bottom: 1rem;
}
شبه کلاس ()has
این pseudo-class اجازه می‌دهد یک عنصر را بر اساس وجود یک عنصر مرتبط درون آن یا رابطه‌ی مشخصی در ساختار انتخاب کنیم.
برای مثال:
<div class="card">
<h3>محصول اول</h3>
</div>
<div class="card">
<h3>محصول دوم</h3>
<img src="product.jpg" alt="عکس محصول">
</div>
.card:has(img) {
border-color: blue;
background: yellow;
}در این مثال، cardهایی انتخاب می‌شوند که شامل یک img هستند.
شبه کلاس ()has
بخش یازدهم: شبه‌کلاس‌های وضعیت سفارشی
شبه کلاس ()state
برای انتخاب وضعیت سفارشی یک Custom Element استفاده میشود و بیشتر در Web Components کاربرد دارد.
برای مثال:
my-element:state(active) {
border: 2px solid green;
}بخش دوازدهم: شبه‌کلاس‌های صفحات و چاپ
شبه کلاس های first،left و right
این pseudo-classها در زمینه‌های خاص مربوط به صفحه‌بندی و چاپ کاربرد دارند.
برای مثال:
@page :first {
margin-top: 0;
}شبه کلاس first برای صفحه اول، و شبه کلاس هاسleft و right برای صفحات چپ و راست در قواعد مربوط به @page استفاده می‌شوند.
شبه کلاس blank
شبه کلاس blank برای هدف قرار دادن صفحه‌ای استفاده میشود که در زمینه صفحه‌بندی و چاپ، محتوای قابل نمایش ندارد.
برای مثال:
@page :blank {
margin: 0;
}بخش سیزدهم شبه‌کلاس‌های مربوط به View Transition
View Transition API امکان ایجاد انتقال‌های بصری بین وضعیت‌های مختلف یک صفحه یا رابط کاربری را فراهم می‌کند. CSS نیز شبه‌کلاس‌هایی برای کنترل برخی وضعیت‌های مربوط به این transitionها دارد.
شبه کلاس active-view-transition
شبه کلاس active-view-transition زمانی قابل استفاده است که یک View Transition در حال اجرا باشد.
برای مثال:
::view-transition-group(*) {
animation-duration: 0.5s;
}شبه کلاس ()active-view-transition-type
شبه کلاس ()active-view-transition-type نسخه تابعی این قابلیت است و برای هدف قرار دادن View Transitionهایی با type مشخص استفاده میشود.
برای مثال:
html:active-view-transition-type(slide)::view-transition-old(root) {
animation-name: slide-out;
}در این مثال، rule مربوط به transitionهایی اعمال میشود که type آن‌ها slide باشد.
بخش چهاردهم:شبه‌کلاس‌های جدید و تخصصی CSS
در کنار شبه‌کلاس‌های رایج CSS، مجموعه‌ای از شبه‌کلاس‌های جدید و تخصصی نیز در حال توسعه یا پیاده‌سازی هستند. برخی از این قابلیت‌ها هنوز پشتیبانی گسترده‌ای در مرورگرها ندارند؛ بنابراین استفاده از آن‌ها باید با توجه به وضعیت استاندارد و پشتیبانی مرورگرها انجام شود.
شبه‌کلاس xr-overlay
شبه‌کلاس xr-overlay برای انتخاب عنصر overlay مربوط به DOM در یک جلسه واقعیت افزوده یا واقعیت مجازی immersive استفاده میشود.
مثال:
:xr-overlay {
background: rgba(0, 0, 0, 0.7);
color: white;
}در محیطی که یک WebXR immersive session از DOM overlay پشتیبانی می‌کند، این selector می‌تواند برای اعمال style به عنصر overlay مورد استفاده قرار گیرد.
شبه‌کلاس target-before
شبه‌کلاس target-before برای انتخاب scroll markerهایی که قبل از scroll marker فعال قرار گرفته‌اند استفاده میشود.
MDN این قابلیت را Experimental و با پشتیبانی محدود معرفی می‌کند.
مثال:
::scroll-marker:target-before {
opacity: 0.5;
}در این مثال، scroll markerهایی که قبل از marker فعال قرار گرفته‌اند، با opacity کمتر نمایش داده می‌شوند.
نکته: شبه کلاس target-before به‌طور معمول روی عناصر HTML عادی استفاده نمی‌شود و برای scroll-markerهایی کاربرد دارد که در یک scroll-marker group قرار گرفته‌اند.
شبه‌کلاس target-current
شبه‌کلاس target-current برای انتخاب scroll marker فعال استفاده میشود؛ یعنی marker مربوط به محتوایی که در حال حاضر موقعیت فعال scroll را دارد.
مثال:
::scroll-marker:target-current {
transform: scale(1.2);
}در این مثال، scroll marker فعال کمی بزرگ‌تر نمایش داده میشود.
شبه‌کلاس target-after
شبه‌کلاس target-after برای انتخاب scroll markerهایی که بعد از scroll marker فعال قرار گرفته‌اند استفاده میشود.
مثال:
::scroll-marker:target-after {
opacity: 0.6;
}در این مثال، markerهایی که بعد از marker فعال قرار دارند، با opacity کمتر نمایش داده می‌شوند.
شبه‌کلاس interest-source
این شبه‌کلاس عنصر آغازکننده تعامل یا همان interest invoker را زمانی انتخاب می‌کند که کاربر نسبت به آن عنصر علاقه یا interaction موردنظر را نشان داده باشد.
مثال:
<button interestfor="tooltip">
راهنما
</button>
<div id="tooltip" popover="hint">
اطلاعات بیشتر
</div>
:interest-source {
outline: 2px solid blue;
}در این مثال، هنگامی که عنصر دکمه به‌عنوان interest source فعال شود، می‌توان با شبه کلاس interest-source ظاهر آن را تغییر داد.
شبه‌کلاس interest-target
شبه‌کلاس interest-target مکمل شبه کلاسinterest-source است و برای انتخاب عنصر مقصد مرتبط با interest استفاده میشود.
مثال
HTML:
<button interestfor="tooltip">
راهنما
</button>
<div id="tooltip" popover="hint">
اطلاعات بیشتر درباره این گزینه
</div>
:interest-target {
border: 2px solid blue;
}در این مثال، زمانی که interest مربوط به عنصر مقصد فعال باشد، می‌توان با شبه کلاس interest-target ظاهر آن را تغییر داد.
جمع‌بندی
شبه‌کلاس‌ها از ابزارهای کلیدی CSS به شمار می‌روند که امکان انتخاب عناصر را بر اساس وضعیت، موقعیت یا شرایط خاص فراهم می‌سازند. این قابلیت‌ها از حالت‌های پرکاربردی همچون شبه کلاس های hover و focus تا گزینه‌های پیشرفته‌تری مانند شبه کلاس های has()و is() را در بر می‌گیرند و هریک در جایگاه مناسب خود کاربرد دارند.
هدف از فراگیری شبه‌کلاس‌ها، حفظ تمامی موارد موجود نیست؛ بلکه درک صحیح کارکرد هر یک و به‌کارگیری آن‌ها برای نگارش CSS دقیق‌تر، خوانا‌تر و قابل نگهداری‌تر است. همچنین با توجه به توسعه مستمر CSS، بررسی میزان پشتیبانی مرورگرها از شبه‌کلاس‌های جدید پیش از استفاده ضروری است.
منابع
1. Mozilla Contributors. Pseudo-classes – CSS. MDN Web Docs. Retrieved from:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes
2. Mozilla Contributors. CSS selectors guide. MDN Web Docs. Retrieved from:
https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors
3. Mozilla Contributors. UI pseudo-classes and forms. MDN Web Docs. Retrieved from:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes
4. Mozilla Contributors. Styling links in CSS. MDN Web Docs. Retrieved from:
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Styling_links
5. Mozilla Contributors. Using the :target pseudo-class in selectors. MDN Web Docs. Retrieved from: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Using_%3Atarget
6. World Wide Web Consortium (W3C). Selectors Level 4 (W3C Recommendation / Draft). Retrieved from: https://www.w3.org/TR/selectors-4/
7. World Wide Web Consortium (W3C). Selectors Level 5 (W3C Working Draft). Retrieved from: https://www.w3.org/TR/selectors-5/
13. World Wide Web Consortium (W3C). HTML Invoker Commands & Interest Group Spec (CSS Interest Pseudo-classes). Retrieved from: https://open-ui.org/components/invokers.explainer/
14. World Wide Web Consortium (W3C). CSS Overflow Module Level 5 (Scroll-marker pseudo-classes). Retrieved from: https://www.w3.org/TR/css-overflow-5/
