سی‌اس‌اس/شبه‌کلاس‌ها و شبه‌عناصر

animation

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

سفارشی‌سازی اسکرول

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

در CSS، گاهی لازم است به حالتی خاص از یک عنصر یا بخش خاصی از آن استایل بدهیم بدون اینکه نیاز باشد کلاس یا ID اضافه کنیم. اینجاست که شبه‌کلاس‌ها (pseudo-classes) و شبه‌عناصر (pseudo-elements) وارد عمل می‌شوند.

تفاوت کلی

شبه‌کلاس‌ها رفتار یا حالت خاص یک عنصر را هدف می‌گیرند (مثلاً زمانی که روی عنصر هاور می‌کنیم).
شبه‌عناصر بخش خاصی از یک عنصر را انتخاب می‌کنند (مثلاً اولین حرف یا قبل از محتوای عنصر).

شبه‌کلاس‌ها (pseudo-classes)

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

مثال‌های رایج

:hover

وقتی ماوس روی عنصر قرار می‌گیرد.

button:hover {
  background-color: blue;
}

:focus

زمانی‌که عنصر در فوکوس قرار می‌گیرد (مثلاً وقتی روی input کلیک می‌کنیم).

input:focus {
  border-color: green;
}

:nth-child()

انتخاب عناصر بر اساس ترتیب آن‌ها در پدرشان.

li:nth-child(odd) {
  background: #eee;
}

می‌توان از عدد، odd (فرد)، even (زوج)، یا فرمول استفاده کرد: `2n+1`, `3n`, و...

:not(selector)

انتخاب تمام عناصری که selector مشخص را ندارند.

p:not(.intro) {
  color: gray;
}

:first-child و :last-child

انتخاب اولین یا آخرین فرزند از نوع خود در عنصر والد.

div:first-child {
  border-top: 2px solid black;
}

:checked، :disabled، :valid و...

برای کار با فرم‌ها استفاده می‌شوند:

input:checked {
  accent-color: red;
}

شبه‌عناصر (pseudo-elements)

شبه‌عناصر با دو نقطه (::) نوشته می‌شوند و بخشی از عنصر را هدف می‌گیرند.

مثال‌های مهم

::before

قبل از محتوای عنصر، یک محتوای مجازی اضافه می‌کند.

h2::before {
  content: "🔹 ";
}

::after

بعد از محتوای عنصر، یک بخش مجازی اضافه می‌کند.

h2::after {
  content: " ❗";
}

نکته: ::before و ::after نیاز به ویژگی `content` دارند، حتی اگر خالی باشد.

::first-letter

انتخاب اولین حرف عنصر.

p::first-letter {
  font-size: 200%;
  color: red;
}

::first-line

انتخاب اولین خط متن (برای متن‌های چند خطی مفید است).

p::first-line {
  font-weight: bold;
}

::selection

استایل بخش انتخاب‌شده توسط کاربر (مانند متن هایلایت‌شده با ماوس).

::selection {
  background: yellow;
  color: black;
}

نکات مهم

استفاده از شبه‌کلاس‌ها به جای افزودن کلاس‌های اضافه، کد شما را تمیزتر می‌کند.
بسیاری از افکت‌های hover، focus، و حالت‌های فرم با استفاده از pseudo-class قابل انجام است.
pseudo-elementها برای ساخت جلوه‌های پیشرفته مانند tooltip یا دکمه‌های تزئینی بسیار مفیدند.
برای استفاده حرفه‌ای از ::before/::after بهتر است آن عنصر دارای `display: block` یا `inline-block` باشد.

تمرین پیشنهادی

یک کارت طراحی کنید که:

با استفاده از `:hover` رنگ آن تغییر کند.
با `::before` یک آیکون یا نماد در ابتدا نمایش داده شود.
با `:nth-child(odd)` پس‌زمینه کارت‌های فردی متفاوت باشد.

سئو و دسترس‌پذیری

pseudo-class و pseudo-element تأثیر مستقیم بر سئو ندارند اما در UI/UX مهم‌اند.
برای خوانایی بهتر یا هدایت کاربر، استفاده درست از آن‌ها در افزایش تعامل تأثیرگذار است.
از استفادهٔ زیاد از ::before/::after برای اطلاعات مهم خودداری کنید، چون برخی اسکرین‌ریدرها آن‌ها را نادیده می‌گیرند.

پیوندهای مرتبط

جمع‌بندی

شبه‌کلاس‌ها و شبه‌عناصر ابزارهای مهمی در CSS هستند که به کمک آن‌ها می‌توان بدون افزودن کد HTML اضافه، استایل‌های پیچیده و کاربردی ایجاد کرد. درک درست آن‌ها پایهٔ طراحی حرفه‌ای و مدرن وب است.