active: یک pseudo-class می باشد که با استفاده از آن می توان در CSS حالت فعال (active) یک عنصر را انتخاب, و بر روی آن عنصر در حالت فعالش استایل خاصی اعمال کرد.
active: یک عنصر را از زمان کلیک شدن تا زمان رها شدن مورد هدف قرار می دهد. استایل دهی یک عنصر در حالت فعال آن تجربه کاربری بهتری را به ارمغان می آورد. استایل دادن های اینچنینی باعث می شود تا کاربر مطمئن شود که عمل کلیک با موفقیت انجام شده یا اینکه متوجه می شود چند بار عمل کلیک را پشت سر هم انجام داده است.
active: معمولا برای عنصر لینک استفاده می شود اما می توان آن را بر روی هر عنصری در صفحه اعمال کرد. مثال زیر باعث می شود تا زمانی که بر روی هر پاراگراف در صفحه کلیک شد رنگ پس زمینه آن تا زمان رها کردن کلیک زرد بماند:
p:active {
background-color: #ff0;
}
خروجی به صورت زیر خواهد بود:
See the Pen :active by Mojtaba Seyedi (@seyedi) on CodePen.
زمانی که قصد استایل دهی بر روی حالت های مختلف یک لینک از قبیل link , visited , focus , hover , active را دارید باید مراقب ترتیب نوشتن آن ها در CSS باشید.
ترتیب زیر در حالت عمومی ترتیب مناسبی است اما در نهایت, این طرح است که ترتیب را مشخص می کند:
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
پشتیبانی مرورگرها
زمانی که از active: برای عنصر لینک استفاده می کنید در تمام مرورگرها کار می کند اما اگر برای عناصر دیگر استفاده کنید در مورد مرورگر مایکروسافت, +IE8 پشتیانی می شود.
همچیو دارین ماشلا