وب‌سایت زنده: واکنش‌های جذاب با شبه‌کلاس‌ها

شبه‌کلاس‌ها: وقتی عناصر CSS زنده می‌شن! ✨

سلام به روی ماه شما! تا اینجا با انتخاب‌گرهایی آشنا شدیم که عناصر HTML رو بر اساس ساختار یا صفت‌هاشون انتخاب می‌کنن. اما گاهی وقت‌ها می‌خوایم استایل یه عنصر رو بر اساس وضعیت یا تعامل کاربر باهاش تغییر بدیم. مثلاً وقتی موس رو روش می‌بریم، یا وقتی روش کلیک می‌کنیم. اینجاست که شبه‌کلاس‌ها (Pseudo-classes) وارد صحنه می‌شن! 🦸‍♀️

شبه‌کلاس‌ها مثل یه “کلاس” اضافی هستن که CSS به صورت خودکار به عناصر اضافه می‌کنه، وقتی که اونها در یه وضعیت خاصی قرار می‌گیرن. اونها با یه دونقطه (`:`) قبل از نامشون مشخص می‌شن. امروز می‌خوام سه تا از پرکاربردترین شبه‌کلاس‌ها رو بهتون معرفی کنم: `:hover`, `:focus` و `:nth-child()`!

1. شبه‌کلاس :hover – وقتی موس رو دوست داره! 🖱️

شبه‌کلاس `:hover` زمانی فعال می‌شه که کاربر موس خودش رو روی یه عنصر ببره. این خیلی برای لینک‌ها، دکمه‌ها و آیتم‌های منو کاربرد داره تا یه بازخورد بصری به کاربر بدن.

مثال: می‌خوایم وقتی موس رفت روی یه لینک، رنگش عوض بشه و زیرش خط بیاد.

/* استایل عادی لینک */
a {
  color: blue;
  text-decoration: none;
  transition: color 0.3s ease; /* یه انیمیشن نرم برای تغییر رنگ */
}

/* استایل وقتی موس روی لینک میره */
a:hover { /* یعنی لینک وقتی در وضعیت hover هست */
  color: darkred; /* رنگش تیره قرمز بشه */
  text-decoration: underline; /* زیرش خط بیاد */
}

`:hover` فقط برای لینک‌ها نیست! می‌تونین برای کارت‌ها، آیتم‌های لیست، یا هر عنصری که می‌خواین با رفتن موس، تغییر کنه، ازش استفاده کنین.

2. شبه‌کلاس :focus – وقتی کاربر روش تمرکز می‌کنه! 🎯

شبه‌کلاس `:focus` زمانی فعال می‌شه که یه عنصر کانون توجه کاربر قرار بگیره. این معمولاً برای فیلدهای ورودی (inputs)، دکمه‌ها، لینک‌ها و سایر عناصری که کاربر می‌تونه با کیبورد یا کلیک کردن باهاشون تعامل کنه، اتفاق می‌افته. خیلی مهمه برای دسترسی‌پذیری!

مثال: وقتی کاربر روی یه فیلد ورودی کلیک می‌کنه، می‌خوایم یه حاشیه دورش ظاهر بشه تا بفهمه کجاست.

/* استایل عادی فیلد ورودی */
input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none; /* این outline پیش‌فرض مرورگر رو حذف می‌کنیم */
}

/* استایل وقتی فیلد فوکوس داره */
input[type="text"]:focus { /* یعنی فیلد ورودی متنی وقتی در وضعیت focus هست */
  border-color: #4CAF50; /* حاشیه سبز بشه */
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* یه سایه کوچیک هم اضافه کنیم */
}

`:focus` به کاربر نشون می‌ده که الان داره با کدوم عنصر تعامل می‌کنه، مخصوصاً وقتی از کلید Tab برای جابجایی بین عناصر استفاده می‌کنه. استفاده از این شبه‌کلاس واقعاً به تجربه کاربری کمک می‌کنه!

3. شبه‌کلاس :nth-child() – انتخاب بر اساس ترتیب! 🔢

این شبه‌کلاس یه کم پیشرفته‌تره ولی فوق‌العاده قدرتمنده! `:nth-child()` به شما اجازه می‌ده که بر اساس موقعیت یه عنصر در بین خواهر و برادرهایش (یعنی در بین عناصری که والد یکسان دارن) استایل بدین.

چند تا شکل رایج داره:

• `:nth-child(n)`: انتخاب عنصر n-ام. مثلاً `:nth-child(3)` عنصر سوم رو انتخاب می‌کنه.
• `:nth-child(even)`: انتخاب تمام عناصر زوج (دوم، چهارم، ششم…).
• `:nth-child(odd)`: انتخاب تمام عناصر فرد (اول، سوم، پنجم…).
• `:nth-child(an+b)`: یه فرمول کلی‌تر برای انتخاب الگوهای پیچیده‌تر.

مثال: می‌خوایم ردیف‌های جدول رو به صورت یکی در میون رنگی کنیم (Zebra Striping).

فایل HTML:

<table>
  <tr><td>ردیف ۱</td></tr>
  <tr><td>ردیف ۲</td></tr>
  <tr><td>ردیف ۳</td></tr>
  <tr><td>ردیف ۴</td></tr>
</table>

فایل CSS:

tr { /* استایل عادی ردیف */
  background-color: white;
}

tr:nth-child(even) { /* ردیف‌های زوج */
  background-color: #f2f2f2; /* یه خاکستری خیلی روشن */
}

/* مثال دیگه: هایلایت کردن اولین و آخرین آیتم یه لیست */
ul li:first-child {
  font-weight: bold; /* اولین آیتم پررنگ */
}

ul li:last-child {
  border-bottom: 1px solid blue; /* آخرین آیتم خط آبی زیرش */
}

`:nth-child()` خیلی قدرتمنده! می‌تونه برای ایجاد الگوهای بصری، یا انتخاب دقیق عناصر در لیست‌ها و جداول استفاده بشه.

شبه‌کلاس‌ها به صفحات وب شما زندگی می‌بخشن و تعامل کاربر رو راحت‌تر و زیباتر می‌کنن. با یادگیری اینها، می‌تونین استایل‌های خیلی خلاقانه‌تر و کاربردی‌تری بسازین. پیش به سوی یادگیری بیشتر! 🚀