Pseudo-classi nei CSS

Le pseudo-classi nei CSS differiscono dalle classi in quanto sono create 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:

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

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 pseudoclassi.

Alcuni link utili:

Tag semantici

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *