شبه کلاس active: در CSS

:active Pseudo-class

شبه کلاس active: در CSS، عنصری را که در حالت اکتیو (فعال) باشد را شناسایی و انتخاب میکند و استایلهایی را که مشخص شده را به آن عنصر اعمال میکند.

شبه کلاس active: یک کلاس داینامیک است که زمانیکه کاربر عنصر مورد نظر را فعال میکند فعال میشود.
اغلب عنصری (معمولا لینک یا تگ <a>) را هدف قرار میدهد که بر روی آن کلیک شده باشد که در این حالت فعال و پس از آنکه
عنصر غیر فعال شد کلاس active: هم غیر فعال میشود.
استایل دهی عنصر در حالت فعال برای ارتباط برقرار کردن و تعامل بهتر با کاربر انجام میشود، تا کاربر متوجه اعمال تغییرات در صفحه شود.
همچنین کاربر میتواند این پیام را دریافت کند که آیا کلیک او صحیح بوده و عملیات بدرستی در حال پیشرفت است یا خیر.

شبه کلاس active: اکثرا برای استایل دهی به لینکها استفاده میشود، اما میتوان از آن برای سایر عناصر نیز استفاده نمود.
در مثال زیر میبینیم:

با کلیک بر روی شکل رنگ آن تغییر پیدا میکند.

html

<div></div>

css

 div {
   width: 110px;
   height: 110px;
   background-color: dodgerblue;
   margin: 25px auto;
   border-radius: 25%;
}
 div:active {
   background-color: tomato;
}

مشاهده و ویرایش کد در حالت تمام صفحه

استایلهایی که با شبه کلاس active: اعمال می شوند توسط شبه کلاس های مرتبط دیگری (visited: ، :hover و link:) که معمولا در ارتباط با هم به کار گرفته میشوند جایگزین میشوند. برای استایل دهی به شیوه صحیح باید تقدم و تاخر نوشتن این شبه کلاسها را رعایت نمایید.

HTML

<p>
    :این پاراگراف حاوی لینک است
    <a href="#">هنگام کلیک بر روی این لینک به رنگ قرمز درمیاید.</a>
    پس زمینه این پاراگراف هنگام کلیک به رنگ خاکستری در میاید.
</p>

CSS

body { direction:rtl;font-family:tahoma; }
a:link { color: blue; }          /* لینک دیده نشده */
a:visited { color: purple; }     /* لینک دیده شده (بعد از کلیک) */
a:hover { background: yellow; }  /* لینک هاور شده */
a:active { color: red; }         /* لینک فعال */
p:active { background: #eee; }   /* پاراگراف فعال شده */

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این شبه کلاس در CSS پشتیبانی می کنند.