آموزش CSS | تغییرات وضعیت (Pseudo-classes)

معرفی تغییرات وضعیت و نحوه استفاده از آنها

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

نحوه استفاده از Pseudo-classes به این صورت است که آنها را با یک دونقطه (:) به انتهای یک انتخابگر (Selector) اضافه میکنید. به عنوان مثال:

a:hover {
  color: red;
}

در این مثال، زمانی که کاربر ماوس خود را روی یک لینک (<a>) میبرد، رنگ متن آن لینک به قرمز تغییر میکند.

توضیح سادهتر:
تصور کنید یک دکمه دارید. وقتی کاربر موس را روی آن میبرد، میخواهید رنگ دکمه عوض شود. Pseudo-class :hover دقیقاً برای همین کار استفاده میشود. وقتی دکمه را کلیک کنید، وضعیت :active فعال میشود و میتوانید استایل متفاوتی به آن بدهید (مثلاً رنگ تیرهتر). هر Pseudo-class یک وضعیت خاص از تعامل کاربر با المان را هدف قرار میدهد.

چند نمونه از Pseudo-classهای پرکاربرد:

• :hover: اعمال استایل وقتی موس روی المان است (بدون کلیک).
• :active: اعمال استایل در لحظه کلیک روی المان (فقط تا زمانی که دکمه موس نگه داشته شده است).
• :focus: اعمال استایل وقتی المان فوکوس دارد (مثلاً یک فیلد ورودی که کاربر در حال تایپ در آن است).
• :visited: اعمال استایل برای لینکهایی که قبلاً بازدید شدهاند.
• :first-child: اعمال استایل به اولین فرزند یک المان والد.

مثال کامل برای تمرین:
فرض کنید میخواهید یک دکمه داشته باشید که وقتی موس روی آن است، رنگ پسزمینهاش زرد شود و وقتی کلیک میشود، سبز شود:

button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
}

button:hover {
  background-color: yellow;
  color: black;
}

button:active {
  background-color: green;
  color: white;
}

نکته مهم: توجه کنید که ترتیب تعریف Pseudo-classها در CSS اهمیت دارد. معمولاً ترتیب پیشنهادی برای لینکها به صورت :link → :visited → :hover → :active است (که به آن "LVHA-order" میگویند). اما برای المانهای عمومی مثل دکمهها، ترتیب :hover و :active معمولاً مشکلی ایجاد نمیکند.

با استفاده از Pseudo-classها میتوانید تعامل کاربر با صفحه را جذابتر و کاربرپسندتر کنید، بدون اینکه نیاز به نوشتن کد جاوااسکریپت داشته باشید.