Den :activepseudo väljaren ändrar utseendet på en länk medan den aktiveras (som klickade på eller på annat sätt aktiverad). Det ses vanligtvis bara under en delad sekund och ger visuell feedback om att elementet verkligen klickades. Det används oftast på ankarlänkar ( ).
Till exempel, här är CSS som gör att ankarlänkar stöter ner en pixel (ger intryck av att skjutas i tredimensionellt utrymme) i det aktiva tillståndet:
Se Pen: aktivt tillstånd av CSS-Tricks Team (@ css-tricks) på CodePen.
: Aktiv kan också tillämpas på alla element. Om du klickar någonstans på sidan i pennan nedan blir hela sidan gul:
Se penndemo för: aktiv psuedo-klass av CSS-Tricks Team (@ css-tricks) på CodePen.
Det är bästa praxis att täcka alla "stater", särskilt för länkar. Ett enkelt sätt att göra det är “LOVE HATE” eller
L: länk
O
V: besökt
E
H: sväva
A: aktiv
T
E
Att göra dem i den ordningen är perfekt.
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; )Annars, säg om du listade den: besökta stilen senast, om den länken besökte skulle den åsidosätta: aktiv och: sväva deklarationen och länken skulle alltid vara lila oavsett om du svävade eller om länken var aktiv (inte ideal).
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Japp | 2.0.4+ | några | 4+ | 4+ | TBD | TBD |