Pseudo-classi nei CSS — CodingCreativo

Le pseudo-classi nei CSS differiscono dalle classi in quanto gli effetti sono creati virtualmente nel browser, al verificarsi di determinati eventi.

Ogni pseudo-classe si definisce mettendo i due punti tra il selettore ed il nome della pseudo-classe stessa.

La sintassi è la seguente:

selettore: pseudo-classe {

proprietà:valore;
}

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Facciamo alcuni esempi di pseudo classi CSS:

p:hover { ...}
.blu:hover {...}
#blu:hover {...}

Quindi una pseudo-classe si può inserire in qualsiasi selettore. L'esempio proposto infatti riguarda il selettore di tipo, il selettore di classe e quello di id.

Pseudo-classi nei CSS utilizzate per i link

Le pseudo-classi sono utilizzate, dalla versione CSS2.1 anche per i collegamenti ipertestuali. In definitiva sono quelle applicate al tag <a>.

Vediamole in dettaglio.

:link

Questa pseudo classe definisce l'aspetto dei link in una pagina. Può essere usata per impostare ad esempio il colore del carattere o lo spessore o ancora la dimensione del font.

Lo scopo è dunque quello di variare le caratteristiche di default dei link.

Vediamone un esempio di utilizzo:

a:link  { 
   color: #00ff00; 
   font-weight: bold; 
   text-decoration: none;
}

In questo modo si impostano tutti i collegamenti della pagina di colore verde, in grassetto e senza sottolineatura.

:visited

Visited definisce le regole dei link una volta che le relative pagine sono già state visitate, infatti servono a ricordare all'utente che quella pagina è già stata vista. Di default i link visited sono di colore viola ma grazie a questa pseudo-classe è possibile modificarne l'aspetto.

a:visited { color:#ff0000; font-weight:bold; text-decoration:none}

Con questo esempio li ho impostati di colore rosso, mentre tutto il resto rimane uguale.

:hover

Questa pseudo-classe viene utilizzata quando si vogliono cambiare le proprietà di default di quando con il cursore del mouse si passa sopra il link.

Viene infatti anche chiamata pseudo-classe dinamica.

a:hover { color:#00ff00; font-weight:bold; text-decoration:underline}

In questo modo si lascia lo stesso colore verde e lo stesso grassetto, mentre l'unica proprietà che cambia è la sottolineatura.

Quindi quando passeremo con il mouse sopra il link vedremo la sottolineatura.

:active

Active rappresenta il momento in cui l'utente clicca con il mouse sul link, fino a quando rilascia il pulsante del mouse; è dunque un momento molto breve.

a:active{ color:#ffff00; font-weight:bold; text-decoration:underline}

Nell'esempio facciamo semplicemente cambiare colore al link, nel caso specifico il colore è il giallo.

Nei prossimi articoli parleremo ancora di altre pseudo-classi nei CSS.

Lezione precedente: background-image CSS

Lezione successiva: pseudo classe first child