Pseudo-class

حالت‌ها و موقعیت‌های خاص یک عنصر: Pseudo-class

تا اینجا Selectorهایی دیدیم که بر اساس ساختار ثابت HTML (تگ، کلاس، id، ویژگی، رابطه با سایر عناصر) کار می‌کردن. اما گاهی نیاز داریم عنصری رو بر اساس یک «حالت» یا «موقعیت خاص» که ثابت نیست انتخاب کنیم؛ مثلاً وقتی موس روش قرار می‌گیره، یا وقتی اولین فرزند والدشه. این دقیقاً کاریه که Pseudo-class انجام می‌ده.

Pseudo-class چیست؟

Pseudo-class با یک نقطه‌ویرگول (:) قبل از نامش نوشته می‌شه و یک حالت خاص، یک موقعیت ساختاری، یا یک ویژگی رفتاری عنصر رو مشخص می‌کنه؛ چیزی که در خود HTML به‌عنوان یک کلاس یا ویژگی نوشته نشده، ولی مرورگر می‌تونه تشخیصش بده.

selector:pseudo-class {
  property: value;
}

دسته اول: Pseudo-classهای تعاملی (Interactive States)

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

hover

button:hover {
  background-color: darkblue;
}

<button>دکمه من</button>

وقتی نشانگر موس روی دکمه قرار بگیره، این استایل فعال می‌شه؛ و به‌محض دور شدن موس، به حالت عادی برمی‌گرده.

focus

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

وقتی کاربر روی یک input کلیک کنه یا با کلید Tab بهش برسه، این استایل اعمال می‌شه. این Pseudo-class نقش مهمی در دسترسی‌پذیری (Accessibility) داره، چون به کاربرانی که با صفحه‌کلید ناوبری می‌کنن، نشون می‌ده الان کدوم عنصر فعاله.

active

button:active {
  transform: scale(0.97);
}

این حالت فقط تا زمانی فعاله که کاربر دکمه ماوس رو روی عنصر پایین نگه داشته؛ یعنی دقیقاً لحظه کلیک کردن، نه قبل و نه بعدش.

دسته دوم: Pseudo-classهای مرتبط با لینک

visited

a:visited {
  color: purple;
}

این Pseudo-class لینک‌هایی رو هدف قرار می‌ده که کاربر قبلاً روشون کلیک کرده و بازدید کرده. به دلایل امنیتی و حریم خصوصی، مرورگرها فقط اجازه تغییر تعداد محدودی Property (مثل رنگ) رو روی این حالت می‌دن.

دسته سوم: Pseudo-classهای مرتبط با فرم

checked

input:checked {
  accent-color: green;
}

<input type="checkbox" checked>
<input type="checkbox">

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

disabled و enabled

input:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

این Pseudo-class عناصر غیرفعال فرم (که ویژگی disabled دارن) رو هدف می‌گیره. برعکسش، :enabled، عناصر فعال رو انتخاب می‌کنه.

دسته چهارم: Pseudo-classهای ساختاری (Structural)

این گروه بر اساس جایگاه یک عنصر در میان Siblingهاش عمل می‌کنن.

first-child و last-child

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

li:last-child {
  color: crimson;
}

<ul>
  <li>اولین آیتم (Bold می‌شود)</li>
  <li>آیتم میانی</li>
  <li>آخرین آیتم (قرمز می‌شود)</li>
</ul>

:first-child فقط عنصری رو انتخاب می‌کنه که اولین فرزند والدشه؛ :last-child هم فقط آخرین فرزند رو. این دو Pseudo-class در فصل بعد (Structural Selectors) با جزئیات بیشتر و در کنار موارد مشابه مثل :nth-child() بررسی می‌شن.

دسته پنجم: root و target

root

:root {
  --main-color: #2c3e50;
}

:root بالاترین عنصر در ساختار سند HTML رو انتخاب می‌کنه (که معمولاً معادل تگ htmlه)، ولی با Specificity بالاتر. این Pseudo-class معمولاً برای تعریف CSS Custom Properties (متغیرها) در سطح کل صفحه استفاده می‌شه؛ موضوعی که در فصل مربوط به Custom Properties کامل بررسیش می‌کنیم.

نکته مهم: Pseudo-class با Specificity چطور رفتار می‌کند؟

از نظر محاسبه Specificity، Pseudo-classها هم‌وزن با Class Selector محسوب می‌شن؛ یعنی هر Pseudo-class، وزن (0,0,1,0) رو به مجموع Specificity اضافه می‌کنه.

button:hover {
  background-color: navy;
}

در این مثال، Specificity کل برابر (0,0,1,1) است: یک واحد برای Type Selector button، و یک واحد برای Pseudo-class :hover.

ترکیب چند Pseudo-class روی یک Selector

input:focus:required {
  border-color: orange;
}

این Selector فقط input‌ای رو هدف می‌گیره که هم در حالت فوکوس باشه و هم ویژگی required داشته باشه؛ هر دو شرط باید هم‌زمان برقرار باشن.

نکات مهم

• Pseudo-classها با یک نقطه‌ویرگول (:) نوشته می‌شن و حالت یا موقعیت خاص یک عنصر رو مشخص می‌کنن.
• از نظر Specificity، هر Pseudo-class هم‌وزن با یک Class Selector است.
• می‌شه چند Pseudo-class رو پشت‌سرهم روی یک Selector ترکیب کرد؛ در این حالت همه شرط‌ها باید هم‌زمان برقرار باشن.

اشتباهات رایج

• فراموش کردن استایل :focus روی عناصر فرم، که مستقیماً روی دسترسی‌پذیری صفحه اثر منفی می‌ذاره.
• استفاده از outline: none; در حالت :focus بدون جایگزین بصری مناسب، که کاربران صفحه‌کلید رو گیج می‌کنه.
• قاطی کردن :hover با :active؛ اولی مربوط به قرارگیری موس است، دومی مربوط به لحظه کلیک.

جمع‌بندی

Pseudo-class امکان هدف قرار دادن یک عنصر بر اساس حالت، موقعیت یا رفتار خاصش رو فراهم می‌کنه؛ مثل حالت hover، focus، checked یا جایگاه ساختاری‌اش در میان Siblingها. این Selectorها با یک : نوشته می‌شن و از نظر Specificity هم‌وزن با Class Selector محسوب می‌شن. در درس‌های بعدی همین فصل، انواع تخصصی‌تر Pseudo-class مثل Structural Selectors و Form-related Selectors رو با جزئیات بیشتری بررسی می‌کنیم.