In questa lezione vediamo come usare le pseudo-classi come selettori nei CSS.
Finora abbiamo visto i seguenti selettori:
- nomi di tag – identificano un particolare gruppo di elementi HTML presenti nella pagina (es: p, body, h1) ;
- classi – rappresentano un’etichetta con cui contrassegnare elementi HTML (anche di tipo diverso) che devono avere lo stesso stile;
- ID – speciali etichette per identificare un unico elemento che avrà uno stile particolare nella pagina.
Esiste la possibilità di usare un altro tipo di selettore nei CSS: le pseudo-classi.
Pseudo-classi
Una pseudo-classe non indica un particolare elemento HTML, indica lo stato in cui si trova.
La pseudo-classe si indica con il nome del tag HTML, seguito da due punti (:) e dal nome dello stato in cui si trova.
Si usano molto per gestire gli stati in cui può trovarsi un link (collegamento):
- a:link – collegamento non ancora visitato;
- a:visited – collegamento già visitato;
- a:hover – collegamento al passaggio del mouse;
- a:active – collegamento attivo.
Per il loro corretto funzionamento, le pseudo-classi vanno inserite in questo ordine.