Lo :activepseudo selettore cambia l'aspetto di un collegamento mentre viene attivato (cliccato o attivato in altro modo). Di solito viene visualizzato solo per una frazione di secondo e fornisce un feedback visivo che l'elemento è stato effettivamente cliccato. Viene tipicamente utilizzato sui collegamenti di ancoraggio ( ).
Ad esempio, ecco il CSS che farà abbassare i link di ancoraggio di un pixel (dando l'impressione di essere spinti nello spazio tridimensionale) nello stato attivo:
Vedi Pen: stato attivo di CSS-Tricks Team (@ css-tricks) su CodePen.
: Active può essere applicato anche a qualsiasi elemento. Nella Penna sottostante, facendo clic in un punto qualsiasi della pagina, l'intera pagina diventerà gialla:
Guarda la Pen Demo della classe: active psuedo del CSS-Tricks Team (@ css-tricks) su CodePen.
È buona norma coprire tutti gli "stati", in particolare per i collegamenti. Un modo semplice per farlo è "LOVE HATE" o
L: link
O
V: visitato
E
H: hover
A: attivo
T
E
Farli in quest'ordine è l'ideale.
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; )Altrimenti, dì se hai elencato lo stile: visitato per ultimo, se quel collegamento è stato visitato, sovrascriverà la dichiarazione: active e: hover e il collegamento sarà sempre viola indipendentemente dal fatto che tu stia passando il mouse o se il collegamento fosse attivo (non ideale).
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sì | 2.0.4+ | qualunque | 4+ | 4+ | TBD | TBD |