شبه کلاس‌ها
شبه کلاس‌ها (Pseudo classes) در CSS ابزارهایی هستند که به توسعه‌دهندگان اجازه می‌دهند تا بر اساس وضعیت یا موقعیت عناصر، بدون تغییر ساختار HTML، استایل خاصی اعمال کنند. می‌توان شبه کلاس‌ها را با تزئین یک خانه مقایسه کرد: شما ساختمان را تغییر نمی‌دهید، اما می‌توانید رنگ دیوارها، چیدمان مبلمان و تزئینات را متناسب با فصل یا مناسبت تغییر دهید.
این قابلیت برای طراحی وب‌سایت‌های تعاملی بسیار مهم است. در یک فروشگاه آنلاین (online shop)، می‌توان از :hover برای برجسته کردن محصولات هنگام حرکت موس استفاده کرد. در سایت خبری (news website)، :first-child می‌تواند اولین خبر یا مقاله را متمایز کند. وبلاگ‌های شخصی (personal blog) می‌توانند از :nth-child برای الگوهای متناوب لیست پست‌ها استفاده کنند تا خوانایی بهتر شود. پرتال‌های دولتی (government portal) از :focus برای جلب توجه کاربران به فیلدهای فرم استفاده می‌کنند.
در این آموزش، شما با شبه کلاس‌های اصلی مانند :hover، :focus، :first-child، :nth-child، :visited و :disabled آشنا می‌شوید. با مطالعه این آموزش، قادر خواهید بود نه تنها نحو (syntax) آن‌ها را درک کنید بلکه در پروژه‌های واقعی نیز از آن‌ها استفاده کنید، طوری که CSS شما تمیز، قابل نگهداری و کارآمد باشد؛ درست مانند یک کتابخانه منظم که هر کتاب در جای خود قرار دارد.
مثال پایه
css/* مثال پایه برای لینک‌ها و ورودی‌ها */
a:hover {
color: #e67e22; /* تغییر رنگ لینک هنگام hover */
text-decoration: underline; /* اضافه کردن زیرخط هنگام hover */
}
li:first-child {
font-weight: bold; /* برجسته کردن اولین آیتم لیست */
}
input:focus {
border-color: #2980b9; /* برجسته کردن فیلد ورودی هنگام focus */
}در این مثال سه شبه کلاس پرکاربرد نشان داده شده است. a:hover زمانی فعال می‌شود که موس روی لینک قرار گیرد و رنگ و زیرخط آن تغییر می‌کند؛ این عمل تجربه کاربری را در سایت‌های خبری و فروشگاه‌ها بهبود می‌بخشد. نحو استفاده از شبه کلاس با یک کولن (:) و سپس نام شبه کلاس است.
li:first-child اولین فرزند هر عنصر والد را هدف قرار می‌دهد و آن را بولد می‌کند. این قابلیت برای برجسته کردن اولین مقاله در وبلاگ یا اولین محصول در فروشگاه آنلاین کاربردی است.
input:focus هنگام فعال شدن فیلد ورودی، حاشیه را تغییر می‌دهد و بازخورد بصری به کاربر ارائه می‌دهد.
شبه کلاس‌ها بدون تغییر DOM عمل می‌کنند. تازه‌کاران ممکن است متوجه شوند که برخی شبه کلاس‌ها کار نمی‌کنند؛ این معمولاً به دلیل تضاد specificity یا وضعیت والد است.
مثال کاربردی
css/* مثال کاربردی برای لیست محصولات فروشگاه آنلاین */
ul.products li:nth-child(odd) {
background-color: #f9f9f9; /* رنگ پس‌زمینه برای آیتم‌های فرد */
}
ul.products li:nth-child(even) {
background-color: #ffffff; /* رنگ پس‌زمینه برای آیتم‌های زوج */
}
button:disabled {
opacity: 0.5; /* کم‌رنگ کردن دکمه‌های غیرفعال */
cursor: not-allowed;
}
a:visited {
color: #7f8c8d; /* تغییر رنگ لینک‌های بازدید شده */
}در این مثال، :nth-child() برای ایجاد الگوی متناوب در لیست محصولات استفاده شده است، که خوانایی و تشخیص آیتم‌ها را آسان‌تر می‌کند؛ مانند چیدمان متناوب کتاب‌ها روی قفسه‌ها در یک کتابخانه.
button:disabled دکمه‌های غیرقابل کلیک را کم‌رنگ می‌کند، مشابه کشوی قفل‌شده در اتاق که نشان‌دهنده محدودیت است.
a:visited رنگ لینک‌های بازدید شده را تغییر می‌دهد تا تاریخچه تعاملات کاربر به صورت بصری نمایش داده شود.
استفاده از این شبه کلاس‌ها می‌تواند بدون نیاز به JavaScript، تعامل و حرفه‌ای بودن وب‌سایت را افزایش دهد.
بهترین روش‌ها شامل طراحی Mobile-First، بهینه‌سازی عملکرد با استفاده از selectors ساده و نگهداری کد مرتب و قابل فهم است. شبه کلاس‌ها باید هدفمند استفاده شوند تا از تکرار و تضاد جلوگیری شود.
اشتباهات رایج شامل: تضاد specificity، نادیده گرفتن حالت‌های موبایل برای :hover یا :focus، overrides بیش از حد و استفاده نکردن از ابزارهای توسعه‌دهنده برای بررسی وضعیت شبه کلاس‌ها.
توصیه‌های رفع خطا: استفاده از dev tools مرورگر برای بررسی حالت عناصر، اعمال مرحله‌ای شبه کلاس‌ها و تست در دستگاه‌های مختلف. جدا کردن سبک‌های شبه کلاس از سبک‌های پایه باعث نگهداری و گسترش راحت‌تر کد می‌شود.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| :hover | استایل هنگام قرار گرفتن موس روی عنصر | a:hover {color:#e67e22;} |
| :focus | استایل هنگام فعال شدن ورودی | input:focus {border-color:#2980b9;} |
| :first-child | استایل اولین فرزند والد | li:first-child {font-weight:bold;} |
| :nth-child(n) | استایل عناصر بر اساس ترتیب | li:nth-child(odd){background:#f9f9f9;} |
| :disabled | استایل عناصر غیرفعال | button:disabled {opacity:0.5;} |
| :visited | استایل لینک‌های بازدید شده | a:visited {color:#7f8c8d;} |
خلاصه اینکه، شبه کلاس‌ها به شما امکان می‌دهند عناصر را بر اساس وضعیت یا موقعیتشان استایل دهید بدون تغییر ساختار HTML. این ویژگی با DOM HTML تعامل دارد و می‌تواند با JavaScript ترکیب شود تا رابط کاربری دینامیک ایجاد کند.
گام‌های بعدی شامل یادگیری شبه کلاس‌های پیشرفته مانند :not() و :has() و ترکیب آن‌ها با Flexbox یا Grid برای کنترل کامل Layout است. تمرین مداوم در فروشگاه‌های آنلاین، وبلاگ‌ها و پرتال‌های دولتی باعث تقویت مهارت و ساخت رابط‌های CSS حرفه‌ای و تعاملی می‌شود.
🧠 دانش خود را بیازمایید
آزمون دانش شما
درک خود از این موضوع را با سوالات کاربردی بسنجید.
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود