شبه‌کلاس‌ها در CSS — مرجع کامل و کاربردی

شبه‌کلاس‌ها (pseudo-classes) بخش مهمی از انتخابگرهای CSS هستند که به شما اجازه می‌دهند عناصر را بر اساس وضعیت، موقعیت ساختاری یا ویژگی‌های دیگری غیر از نام کلاس/آی‌دی انتخاب و استایل‌دهی کنید. به‌زبان ساده، شبه‌کلاس‌ها وقتی به کار می‌آیند که می‌خواهیم براساس «حالت» عنصر (مثل hover یا checked) یا ساختار DOM (مثل nth-child) رفتار متفاوتی اعمال کنیم.

تفاوت شبه‌کلاس و شبه‌عنصر

شبه‌کلاس (مثلاً :hover) عنصری را انتخاب می‌کند، در حالی که شبه‌عنصر (مثل ::before) یک بخش مجازی از داخل یا اطراف آن عنصر را هدف می‌گیرد. نیمه‌قانونی که کمک‌کننده است: شبه‌کلاس با یک در جلو (:) و شبه‌عنصر با دو در جلو (::) نوشته می‌شود (گرچه در مرورگرهای قدیمی‌تر هر دو گاهی با یک نقطه هم پشتیبانی می‌شدند).

دسته‌بندی کلی شبه‌کلاس‌ها

• حالت‌های تعاملی: :hover, :focus, :active, :visited
• فرم و کنترل‌ها: :checked, :disabled, :enabled, :required, :valid, :invalid
• ساختاری: :first-child, :last-child, :nth-child(), :only-child, :empty
• پیوستگی UI و ناوبری: :target, :root, :lang()

نمونه‌های عملی

/* حالت‌ها */a:hover { color: darkorange; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ساختار */ul li:nth-child(odd) { background: #f7f7f7; }
article p:first-child { margin-top: 0; }

/* فرم‌ها */input:required { border-color: #e74c3c; }
input:focus { outline: 2px solid #66afe9; }

این کد نمونه‌های معمول استفاده از شبه‌کلاس‌ها را نشان می‌دهد: تغییر رنگ لینک در زمان hover، غیرفعال‌سازی دکمه، رنگ پس‌زمینه سطرهای فرد در لیست و استایل‌دهی به فیلدهای موردنیاز یا زمانی که فوکوس دارند.

جزئیات پیشرفته: :nth-child() و فرمول‌ها

:nth-child(an + b) یک ابزار بسیار منعطف است. برای مثال nth-child(2n) تمام عناصر زوج را می‌گیرد، nth-child(3n+1) آیتم‌های 1، 4، 7 و … را انتخاب می‌کند.

/* نمونه: جدول با ردیف‌های هایلایت */tr:nth-child(2n) { background: #fafafa; }
tr:nth-child(3n+1) { font-weight: bold; }

در این مثال، از فرمول‌های مختلف برای استایل‌دهی متناوب و الگوهای پیچیده‌تر استفاده شده است.

سختی‌ها و نکات مربوط به specificity

شبه‌کلاس‌ها همانند یک انتخابگر کلاس محاسبه می‌شوند از نظر specificity. یعنی وزن آن‌ها برابر با یک کلاس است (0-1-0). اگر خواستید استایل شبه‌کلاسی را بازنویسی کنید، یا باید specificity بالاتری بدهید یا از !important با احتیاط استفاده کنید.

عملکرد و مرورگرها

بیشتر شبه‌کلاس‌های رایج توسط مرورگرهای مدرن پشتیبانی می‌شوند. با این حال، برخی شبه‌کلاس‌های جدیدتر مانند :focus-visible یا :indeterminate ممکن است برای همه مرورگرها در دسترس نباشند یا رفتار متفاوتی داشته باشند. همیشه از Can I Use برای چک کردن پشتیبانی استفاده کنید و در صورت نیاز پلی‌فیل یا fallback در نظر بگیرید.

دسترس‌پذیری (Accessibility)

استفاده از :focus و مخصوصاً :focus-visible برای نمایش حالت فوکوس بسیار مهم است. بسیاری از طراحان به اشتباه فقط از :hover برای نمایش تعامل استفاده می‌کنند و کاربران کیبورد/اسکرین‌ریدر را فراموش می‌کنند. با :focus-visible می‌توانید تنها برای کاربران کیبوردی استایل‌های واضح‌تری نمایش دهید.

/* بهتر: جدا کردن حالت فوکوس برای کیبورد */a:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }

استفاده از :focus-visible تضمین می‌کند که کاربران با کیبورد فوکوس را ببینند، اما کاربران موس را با حاشیه‌های اضافی آزار نمی‌دهید.

ترکیب‌ها و سلسله مراتب

شبه‌کلاس‌ها را می‌توان با هم زنجیر کرد و یا با انتخابگرهای دیگر ترکیب کرد:

/* ترکیب چندین شبه‌کلاس */button:hover:active { transform: translateY(1px); }

/* انتخاب عناصر غیر از موردی مشخص */li:not(.selected):hover { background: #eee; }

در این مثال، ترکیب:hover و :active برای تعاملات لحظه‌ای کاربر استفاده شده و :not() برای استثنا قائل‌شدن کاربرد دارد.

جدول مرجع سریع

کاربردهای خلاقانه

• ساخت تب CSS-only با :target برای صفحات کوچک یا دموها.
• تغییر آیکون یا حالت لیست با :checked و sibling combinators برای toggle بدون JS.
• استفاده از :empty برای پنهان‌سازی مکان‌نماها یا پیام‌های پیش‌فرض.

/* مثال: کنترل نمایش با checkbox (CSS-only toggle) */input[type="checkbox"] { display: none; }
input[type="checkbox"]:checked + .panel { display: block; }
.panel { display: none; }

در این الگو، یک checkbox مخفی شده و بر اساس وضعیت :checked، بخش مجاور (با سلکتور sibling) نمایش داده می‌شود. این تکنیک برای منوها یا آکاردئون‌های ساده بدون جاوااسکریپت مفید است.

نتیجه‌گیری و توصیه‌های عملی

شبه‌کلاس‌ها ابزار قدرتمندی برای کاهش نیاز به جاوااسکریپت و برای پیاده‌سازی رفتارهای پویا و ساختاری هستند. در عین حال به نکات دسترس‌پذیری، specificity و پشتیبانی مرورگر دقت کنید. با تمرین روی پروژه‌های واقعی مانند فرم‌ها، جداول و کامپوننت‌های تعاملی، مهارت شما در استفاده از شبه‌کلاس‌ها به‌سرعت رشد می‌کند.

در صورت نیاز می‌توانم مثال‌های بیشتر، چک‌لیست دسترس‌پذیری یا الگوهای آماده برای کامپوننت‌های رایج مثل منو، تب و آکاردئون ارائه دهم.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال