آموزش Pseudo-classes در CSS: تغییر استایل عناصر با hover، focus و nth-child

Pseudo-classes در CSS به شما امکان می‌دهند که استایل‌های خاصی را برای عناصر HTML در حالت‌های خاص تعریف کنید، بدون اینکه نیازی به اضافه کردن کلاس‌های جدید در HTML داشته باشید. از جمله پرکاربردترین pseudo-classes می‌توان به hover، focus و nth-child اشاره کرد. این ویژگی‌ها در طراحی تعاملی و واکنش‌گرا بسیار مفید هستند. در این مقاله به نحوه استفاده از این pseudo-classes برای ایجاد تغییرات و افکت‌های کاربردی و زیبا در عناصر وب‌سایت می‌پردازیم.

Pseudo-class چیست؟

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

استفاده از برای ایجاد افکت‌های تعاملی

:hover یکی از پرکاربردترین pseudo-classes است که زمانی فعال می‌شود که موس روی یک عنصر قرار گیرد. این ویژگی معمولاً برای لینک‌ها، دکمه‌ها و تصاویر استفاده می‌شود تا هنگام قرار گرفتن موس روی عنصر، تغییراتی مانند تغییر رنگ، سایه یا اندازه ایجاد شود.

مثال ساده از

button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

در اینجا:

• هنگامی که موس روی دکمه قرار می‌گیرد، رنگ پس‌زمینه به آرامی به رنگ تیره‌تر تغییر می‌کند.

• ویژگی transition باعث می‌شود تغییر رنگ به صورت نرم و روان اتفاق بیفتد.

مثال پیشرفته‌تر از با تغییر اندازه و سایه

.card {
  width: 200px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

در اینجا:

• کارت با قرار گرفتن موس روی آن کمی بزرگ‌تر شده و سایه بیشتری می‌گیرد.

استفاده از برای استایل‌دهی به عناصر قابل انتخاب

:focus pseudo-class زمانی فعال می‌شود که یک عنصر مانند input، textarea یا select در حالت انتخاب یا تمرکز قرار بگیرد، معمولاً بعد از کلیک کاربر بر روی آن عنصر. این ویژگی به طور خاص برای بهبود دسترسی کاربران و تمرکز آن‌ها بر روی فیلدهای ورودی بسیار مفید است.

مثال از برای فیلدهای ورودی

input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #3498db;
  outline: none;
}

در اینجا:

• وقتی که کاربر روی یک فیلد ورودی کلیک می‌کند، رنگ حاشیه به رنگ آبی تغییر می‌کند.

• outline: none حذف می‌شود تا ظاهر زیباتری داشته باشد.

استفاده از برای انتخاب عناصر فرزند خاص

:nth-child به شما اجازه می‌دهد تا استایل‌هایی را بر اساس موقعیت فرزند یک عنصر در ساختار HTML اعمال کنید. این pseudo-class برای ایجاد چیدمان‌های منظم در لیست‌ها و جدول‌ها کاربرد زیادی دارد.

مثال از برای استایل‌دهی به لیست‌ها

ul li:nth-child(odd) {
  background-color: #f2f2f2;
}

ul li:nth-child(even) {
  background-color: #e6e6e6;
}

در اینجا:

• nth-child(odd) و nth-child(even) به ترتیب رنگ پس‌زمینه سطرهای فرد و زوج را تغییر می‌دهند و لیستی با استایل جذاب‌تر ایجاد می‌کنند.

مثال از برای استایل‌دهی به ردیف‌های جدول

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

در اینجا، nth-child(even) رنگ پس‌زمینه ردیف‌های زوج جدول را تغییر می‌دهد که به بهبود خوانایی جدول کمک می‌کند.

دیگر pseudo-classes کاربردی

:active زمانی فعال می‌شود که کاربر یک عنصر را کلیک کند یا نگه دارد. این ویژگی معمولاً برای دکمه‌ها و لینک‌ها کاربرد دارد و افکت کلیک ایجاد می‌کند.

button:active {
  background-color: #1f78b4;
}

• :first-child برای انتخاب اولین فرزند یک عنصر.

• :last-child برای انتخاب آخرین فرزند یک عنصر.

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

ul li:last-child {
  color: #3498db;
}

در اینجا:

• اولین آیتم لیست به صورت ضخیم نمایش داده می‌شود و رنگ آخرین آیتم تغییر می‌کند.

:not به شما امکان می‌دهد که عناصر خاصی را از یک استایل مستثنی کنید.

button:not(.primary) {
  background-color: #ddd;
  color: black;
}

در اینجا، تمامی دکمه‌هایی که کلاس primary ندارند، با رنگ خاکستری و مشکی نمایش داده می‌شوند.

ترکیب pseudo-classes برای ایجاد استایل‌های پیشرفته‌تر

می‌توانید pseudo-classes مختلف را برای ایجاد استایل‌های پیچیده‌تر ترکیب کنید. این ترکیبات برای ساخت طرح‌های حرفه‌ای و کنترل دقیق‌تر روی استایل‌ها بسیار مفید هستند.

مثال ترکیب

ul li:nth-child(odd):hover {
  background-color: #d9ebf5;
}

در اینجا:

• رنگ پس‌زمینه آیتم‌های فرد لیست در حالت hover تغییر می‌کند.

مثال ترکیب

input:not(:focus) {
  border-color: #ccc;
}

در اینجا:

• برای تمامی فیلدهای ورودی که در حالت focus نیستند، حاشیه‌ای خاکستری تنظیم می‌شود.

نکات و بهترین شیوه‌ها برای استفاده از pseudo-classes

• استفاده از ترانزیشن‌ها: برای افکت‌های تعاملی مانند hover و focus از ترانزیشن‌ها استفاده کنید تا تغییرات نرم و جذاب شوند.

• دسترسی‌پذیری: با pseudo-classهایی مانند :focus و :hover، دسترسی به عناصر را برای کاربران بهبود دهید و اطمینان حاصل کنید که عناصر به راحتی قابل شناسایی هستند.

• استفاده‌ی محدود از : برای بهینه بودن کد و جلوگیری از پیچیدگی‌های غیرضروری، تنها در مواقعی که لازم است از nth-child استفاده کنید.

نتیجه‌گیری

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