: активен - CSS-трикове | CSS алманах 2025

В :activeселектора псевдо променя външния вид на връзка, докато се активира (върху тях се кликва или активира друго). Обикновено се вижда само за част от секундата и осигурява визуална обратна връзка, че елементът наистина е щракнат. Най-често се използва за анкерни връзки ( ).

Например, ето CSS, който ще направи анкерните връзки да се сблъскат с един пиксел (създавайки впечатлението, че са изтласкани в триизмерно пространство) в активно състояние:

Вижте Pen: активно състояние от CSS-Tricks Team (@ css-tricks) на CodePen.

: Активен може да се прилага и за всеки елемент. В писалката по-долу, щракването навсякъде на страницата ще направи цялата страница жълта:

Вижте Демоверсията на: активния клас psuedo от екипа на CSS-Tricks (@ css-tricks) на CodePen.

Най-добрата практика е да се обхванат всички „държави“, особено за връзки. Един лесен начин да направите това е „LOVE HATE“ или

L: връзка
O
V: посетена
E

H: задръжте
A: активен
T
E

Правенето им в този ред е идеално.

a:link ( /* Essentially means a(href), or that the link actually goes somewhere */ color: blue; ) a:visited ( color: purple; ) a:hover ( color: green; ) a:active ( color: red; )

В противен случай кажете, ако сте изброили последно стила на посещение, ако тази връзка е била посетена, тя ще замени декларацията: active и: hover и връзката винаги ще бъде лилава, независимо дали сте се навъртали или ако връзката е била активна (не е идеална).