O :activepseudo seletor muda a aparência de um link enquanto está sendo ativado (sendo clicado ou ativado). Geralmente, ele é visto apenas por uma fração de segundo e fornece feedback visual de que o elemento foi realmente clicado. É mais comumente usado em links âncora ( ).
Por exemplo, aqui está o CSS que fará com que os links de âncora caiam um pixel (dando a impressão de estar sendo empurrados em um espaço tridimensional) no estado ativo:
Veja a Caneta: estado ativo da equipe CSS-Tricks (@ css-tricks) no CodePen.
: Ativo também pode ser aplicado a qualquer elemento. Na Caneta abaixo, clicar em qualquer lugar da página tornará toda a página amarela:
Veja o Pen Demo da classe: active psuedo por CSS-Tricks Team (@ css-tricks) no CodePen.
É uma prática recomendada cobrir todos os “estados”, especialmente para links. Uma maneira fácil de fazer isso é “LOVE HATE” ou
L: link
O
V: visitado
E
H: pairar
A:
T
E ativo
Fazê-los nessa ordem é o ideal.
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; )Caso contrário, diga se você listou o estilo: visitado por último, se esse link foi visitado, ele substituirá a declaração: active e: hover e o link sempre ficará roxo, independentemente se você estiver pairando ou se o link estiver ativo (não ideal).
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sim | 2.0.4+ | nenhum | 4+ | 4+ | TBD | TBD |