: активний - CSS-хитрощі | Альманах CSS 2025

:activeСелектор псевдо змінює зовнішній вигляд посилання в той час як він активується (будучи натиснута або іншим активованим). Зазвичай це бачиться лише на частку секунди і забезпечує візуальний зворотний зв’язок про те, що елемент справді клацнув. Найчастіше він використовується на прив’язкових посиланнях ( ).

Наприклад, ось CSS, який змусить якірні посилання зіштовхнутись на один піксель (створюючи враження переміщення в тривимірному просторі) в активному стані:

Див. Pen: активний стан команди CSS-Tricks (@ css-tricks) на CodePen.

: Активний також може застосовуватися до будь-якого елемента. У ручці нижче, натиснувши де-небудь на сторінці, вся сторінка стане жовтою:

Див. Демонстраційну ручку класу: active psuedo класу CSS-Tricks Team (@ css-tricks) на CodePen.

Найкращою практикою є охоплення всіх "штатів", особливо щодо посилань. Це найпростіший спосіб - “ЛЮБИТИ НЕВИДУ” або

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, і посилання завжди буде фіолетовим, незалежно від того, чи ви наводили курсор, чи посилання було активним (не ідеально).