: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:
) که معمولا در ارتباط با هم به کار گرفته میشوند جایگزین میشوند. برای استایل دهی به شیوه صحیح باید تقدم و تاخر نوشتن این شبه کلاسها را رعایت نمایید.
ترتیب بصورت مقابل است:
:link
– :visited
– :hover
– :active
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 پشتیبانی می کنند.