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;
}
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.
Alcuni link utili
Fogli di stile interni, esterni ed in linea
