آموزش کامل شبه کلاس ها در CSS

مقدمه

شبه کلاس‌ها (Pseudo-classes) در CSS ابزار قدرتمندی برای اعمال استایل به حالت‌های خاص عناصر هستند. با استفاده از شبه کلاس‌ها می‌توان استایل عناصر را در حالت‌های مختلف مانند hover، focus یا اولین فرزند تغییر داد. برای یادگیری کامل CSS و استفاده حرفه‌ای از شبه کلاس‌ها پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی شبه کلاس‌ها

شبه کلاس‌ها با علامت : قبل از نام کلاس در CSS استفاده می‌شوند و به حالت‌های خاص عناصر اعمال می‌شوند.

:hover → وقتی موس روی عنصر قرار می‌گیرد
:focus → وقتی عنصر انتخاب یا فعال است
:first-child → اولین فرزند عنصر والد
:last-child → آخرین فرزند عنصر والد
:nth-child(n) → فرزند n ام عنصر والد

مثال عملی با کد

افکت هاور روی دکمه:

button:hover {
  background-color: red;
  color: white;
}

افکت فوکوس روی فیلد متن:

input:focus {
  border-color: blue;
  outline: none;
}

استایل‌دهی اولین و آخرین فرزند:

ul li:first-child {
  font-weight: bold;
}

ul li:last-child {
  font-style: italic;
}

استفاده از nth-child:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

نکات مهم و توضیحات تکمیلی

ترتیب شبه کلاس‌ها در CSS مهم است و باید به دقت رعایت شود.
می‌توان شبه کلاس‌ها را با کلاس‌ها و ID‌ها ترکیب کرد.
استفاده از pseudo-class برای افکت‌ها و تعاملات کاربری بسیار کاربردی است.
در طراحی Responsive، استفاده مناسب از شبه کلاس‌ها تجربه کاربری را بهبود می‌بخشد.