Archivi tag: hover

CSS3 Base – 5.3 – Pseudo-classi

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.
Pseudo-classi per i link
Pseudo-classi per i link

Per il loro corretto funzionamento, le pseudo-classi vanno inserite in questo ordine.

Video