کلاس‌های کاذب در CSS

css pseudo classes guide
20 آبان 1403

کلاس‌های کاذب در CSS به شما این امکان را می‌دهند که به رویداد‌های خاصی دسترسی پیدا کنید که در عناصر HTML رخ می‌دهد، بدون اینکه نیازی به اضافه کردن کلاس‌های خاصی به کد HTML خود داشته باشید. این ابزارها برای توسعه‌دهندگان وب بسیار ارزشمند هستند چرا که با کاهش وابستگی به کد HTML به بهبود خوانایی و کارایی کد منجر می‌شوند.

کلاس‌های کاذب پرکاربرد شامل :hover، :focus، :active و :visited هستند. کلاس :hover برای زمانی است که کاربر بر روی یک عنصر حرکت می‌کند. این کلاس معمولاً برای دکمه‌ها و لینک‌ها به کار می‌رود تا جلوه‌های بصری زیبایی ایجاد کنند.

کلاس :focus برای تعاملی کردن عناصر فرم‌ها بسیار پرکاربرد است. با این کلاس شما می‌توانید به عنوان مثال، فیلدهایی را که کاربر در حال پر کردن آن‌ها است برجسته کنید.

متن معمولاً شامل توضیحاتی است که چگونه می‌توانید این کلاس‌ها را در پروژه‌های واقعی استفاده کنید. در زیر کد نمونه‌ای جهت مشاهده بهتر آمده است.


<style>
a:hover {
    color: red;
}
input:focus {
    background-color: yellow;
}
button:active {
    transform: scale(0.98);
}
a:visited {
    color: purple;
}
</style>

a:hover: زمانی که کاربر موس خود را روی لینک ببرد، رنگ آن به قرمز تغییر می‌کند.
input:focus: هر زمانی که یک input در حالت فوکوس قرار گیرد، پس‌زمینه آن به زرد تغییر خواهد کرد.
button:active: زمانی که دکمه‌ کلیک می‌شود، کمی کوچکتر نمایش داده می‌شود تا ایمپرسیو بودن آن شبیه‌سازی شود.
a:visited: زمانی که لینک قبلاً بازدید شده باشد، رنگ آن به بنفش تغییر می‌کند.

سوالات متداول

؟

چگونه می‌توانم یک لینک را با رنگ دیگری در حالت :hover نمایش دهم؟

؟

کاربرد اصلی :focus چیست؟