Pseudo-Classi: Le Classi Speciali

Il concetto di pseudo-classe è di fondamentale importanza all’interno del contesto dei CSS. Una pseudo-classe non regola la presentazione di un elemento in sé, ma piuttosto di uno stato particolare di esso. In breve, le pseudo-classi consentono di definire uno stile per un elemento quando si verificano determinate condizioni. Iniziamo esaminando la sintassi generale e quindi passiamo in rassegna le varie categorie definite nelle specifiche.

Sintassi Per dichiarare una pseudo-classe, è necessario seguire questa struttura:

selettore:pseudo-classe {dichiarazioni;} Le pseudo-classi sono contraddistinte dai due punti (:) e seguono immediatamente il selettore, e possono essere applicate a qualsiasi tipo di selettore.

/* Pseudo-classe con un elemento singolo /

a:link {color: white;}

/ Pseudo-classe con un selettore discendente /

p a:link {color: white;}

/ Pseudo-classe con un selettore di classe /

a.classe:hover {color: white;}

/ Pseudo-classe con un selettore di id /

#id:hover {color: white;}

/ Pseudo-classe con un selettore di attributo */

input[type=text]:focus {background: yellow;}

Pseudo-classi per i link

Le prime due pseudo-classi che analizziamo sono associate ai link, cioè agli elementi ‘a’. Queste pseudo-classi servono a definire l’aspetto dei collegamenti ipertestuali presenti in una pagina.

:link La pseudo-classe :link regola l’aspetto predefinito dei link, ossia quando non sono ancora stati visitati. Grazie a questa pseudo-classe, è possibile personalizzare il colore, la decorazione del testo, lo stile del carattere e altre proprietà degli elementi ‘a’, superando le impostazioni predefinite dei browser, che solitamente rendono i link blu e sottolineati.

Ad esempio, se desideriamo che i link siano bianchi, senza sottolineatura e in grassetto, possiamo utilizzare il seguente codice CSS:

a:link { color: white; text-decoration: none; font-weight: bold; }

Tuttavia, se vogliamo applicare questa formattazione solo a specifici link e non a tutti, possiamo contrassegnare tali link nel codice HTML con una classe e utilizzare il selettore di classe nel CSS:

<p><a href=”#” class=”bianco”>Sono un link bianco</a>.</p> <p><a href=”#”>Sono un link ma non bianco</a>.</p> <p><a href=”#” class=”bianco”>Anche io sono bianco</a>.</p>

a.bianco:link { color: white; text-decoration: none; font-weight: bold; }

:visited

La pseudo-classe :visited permette di modificare l’aspetto dei link una volta che sono stati visitati. Di default, i browser rendono i link visitati di colore viola e sottolineati.

Riprendendo l’esempio precedente e aggiungendo la regola :visited nel CSS:

a.bianco:link { color: white; text-decoration: none; font-weight: bold; } a.bianco:visited { color: green; }

In questo modo, quando si visita il link e si torna alla pagina originale, il link avrà il colore verde.

Pseudo-classi dinamiche Il secondo gruppo di pseudo-classi definite nelle specifiche sono le cosiddette pseudo-classi dinamiche. Queste pseudo-classi servono a modificare l’aspetto di un elemento in risposta a un’azione dell’utente. Sebbene siano comunemente utilizzate per i link, possono essere applicate anche ad altri tipi di elementi, non solo agli elementi ‘a’.

:hover

La pseudo-classe :hover viene attivata quando il cursore del mouse (o un altro dispositivo di puntamento) si posiziona sopra un elemento senza fare clic su di esso. Solitamente, questa pseudo-classe viene utilizzata per modificare l’aspetto dei link e dei pulsanti quando il mouse passa su di essi. Può anche essere usata per emulare interazioni tipiche di JavaScript nei CSS, ad esempio per la creazione di menu a discesa in cui una sezione appare e scompare quando il mouse ci passa sopra.

Per spiegare l’utilizzo di :hover, possiamo continuare con l’esempio precedente. Se vogliamo che il colore del link cambi quando il cursore passa su di esso, possiamo aggiungere la seguente regola CSS:

a.bianco:link { color: white; text-decoration: none; font-weight: bold; } a.bianco:visited { color: green; } a.bianco:hover { color: blue; }

:active

La pseudo-classe :active, come suggerisce il nome, definisce l’aspetto di un elemento mentre l’utente lo sta attivando. Tipicamente, quando si interagisce con il mouse, un elemento è nello stato :active mentre si tiene premuto il pulsante su di esso, ovvero durante il tempo trascorso tra il clic e il rilascio del pulsante.

Ad esempio, possiamo fare in modo che il link diventi rosso quando viene attivato:

a.bianco:link { color: white; text-decoration: none; font-weight: bold; } a.bianco:visited { color: green; } a.bianco:hover { color: blue; } a.bianco:active { color: red; }

Con queste due pseudo-classi, è possibile personalizzare l’aspetto e il comportamento dei link a nostro piacimento, poiché è possibile agire su molte altre proprietà oltre al colore. Inoltre, non sono limitate ai soli link ma possono essere utilizzate anche su altri elementi. Ecco un esempio in cui, utilizzando altre proprietà CSS, è possibile creare un effetto di pulsante tridimensionale.

:focus

La pseudo-classe :focus viene attivata quando un elemento riceve il focus. In termini semplici, ciò avviene quando l’elemento può accettare eventi tramite la tastiera, come l’inserimento di testo in un modulo.

Un esempio può illustrare meglio il suo utilizzo. Se vogliamo cambiare il colore di sfondo di un campo di testo quando riceve il focus, possiamo utilizzare il seguente codice CSS:

input:focus { background: yellow; }

Il colore di sfondo tornerà al suo valore predefinito quando l’input perde il focus.