Il concetto di pseudo-classe è di assoluto rilievo nel contesto dei CSS. Una pseudo-classe non definisce la presentazione di un elemento ma di un particolare stato di quest'ultimo. In buona sostanza, grazie alle pseudo-classi possiamo impostare uno stile per un elemento al verificarsi di certe condizioni. Iniziamo analizzando la sintassi generica, per poi passare in rassegna le diverse tipologie definite nella specifica.
Sintassi
Per dichiarare una pseudo-classe si usa questa sintassi:
selettore:pseudo-classe {dichiarazioni;}I nomi delle pseudo-classi, innanzitutto, sono preceduti dai due punti (:). Una pseudo-classe segue senza spazi il nome del selettore e può essere associata a tutti i tipi di selettore.
/* Pseudo-classe con elemento semplice */
a:link {color: white;}
/* Pseudo-classe con selettore discendente */
p a:link {color: white;}
/* Pseudo-classe con selettore di classe */
a.classe:hover {color: white;}
/* Pseudo-classe con selettore di id */
#id:hover {color: white;}
/* Pseudo-classe con selettore di attributo */
input[type=text]:focus {background: yellow;}Pseudo-classi per i link
Le prime due pseudo-classi che prendiamo in considerazione sono associate ai link, ovvero all'elemento a. Servono a impostare l'aspetto dei collegamenti ipertestuali presenti in una pagina.
:link
La pseudo-classe :link definisce l'aspetto di partenza dei link, ovvero quello che ci troviamo davanti quando non sono stati visitati. Grazie ad essa possiamo personalizzare il colore, la decorazione del testo, la consistenza del font e altre proprietà degli elementi a superando le impostazioni di default dei browser, che di norma rendono i link con il colore blue e la sottolineatura.
Se dunque vogliamo link con il testo bianco, in grassetto e senza sottolineatura, scriveremo nel CSS:
a:link {
color: white;
text-decoration: none;
font-weight: bold;
}In questo modo, però, tutti i link avranno lo stesso aspetto. Se vogliamo applicare quella formattazione solo a certi link e non ad altri, nel codice HTML li contrassegniamo con una classe e nel CSS usiamo il selettore di classe:
<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 serve a modificare, se lo vogliamo, l'aspetto dei link quando siano stati visitati. Di default i browser rendono i link visitati con il colore viola e la sottolineatura.
Riprendiamo e modifichiamo l'esempio di prima aggiungendo al CSS la regola con :visited:
a.bianco:link {
color: white;
text-decoration: none;
font-weight: bold;
}
a.bianco:visited {
color: green;
}Se si visita la pagina collegata e si torna a quella di origine, il link sarà verde.
Pseudo-classi dinamiche
Il secondo gruppo di pseudo-classi definite nella specifica è quello delle cosiddette pseudo-classi dinamiche. Anch'esse servono a impostare e modificare la presentazione di un particolare stato di un elemento, ma ciò avviene in seguito ad un'azione dell'utente.
Pur trovando un campo di applicazione molto comune a livello dei link, possono essere applicate anche ad altri tipi di elementi, non solo dunque all'elemento a.
:hover
Questa pseudo-classe viene applicata quando si passa con il cursore del mouse (o altro dispositivo di puntamento) su un elemento senza attivarlo, ovvero senza cliccarci sopra. La sua applicazione più comune è quella per cui possiamo modificare l'aspetto di link e pulsanti al passaggio del mouse, ma viene usata anche per emulare nei CSS interazioni tipiche di Javascript, per esempio nella creazione di menu a tendina in cui una sezione compare e scompare, appunto, al passaggio del mouse.
Per spiegare l'uso di :hover proseguiamo nell'adattamento dell'esempio da cui siamo partiti. Vogliamo fare in modo che il link cambi colore quando ci si passa sopra con il cursore. È sufficiente aggiungere una sola regola:
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, serve a impostare la presentazione di un elemento quando e mentre esso viene attivato dall'utente. Tipicamente, interagendo con il mouse, un elemento è in stato :active mentre si tiene premuto il pulsante su di esso, ovvero per tutto il tempo che intercorre tra il click e il rilascio del pulsante.
Potremmo allora fare in modo che il link su cui stiamo lavorando diventi rosso quando viene attivato. Completiamo così il codice:
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: rosso;
}Con queste due pseudo-classi, dunque, possiamo personalizzare a nostro piacimento l'aspetto e il comportamento dei link, anche perché è possibile agire su diverse altre proprietà oltre che sul colore. Come si accennava, nulla ci impedisce di impiegarle su altri elementi. Ecco un esempio in cui, facendo ricorso ad altre proprietà dei CSS, possiamo ricreare e simulare un pulsante tridimensionale.
:focus
La pseudo-classe :focus viene attivata quando un elemento riceve il focus. Come spiega la specifica CSS, questo stato scatta quando un elemento può accettare eventi attraverso la tastiera, per esempio l'inserimento di testo in un modulo.
Da quanto si è detto, si può intuire come :focus abbia il suo ambito preferenziale di utilizzo nei campi dei form.
Vediamo una dimostrazione. Vogliamo modificare il colore di sfondo di un campo di testo quando esso riceve il focus, ovvero quando ci posizioniamo con il cursore al suo interno e il campo è pronto a ricevere il testo che vogliamo scrivere:
input:focus {background: yellow;}Lo sfondo torna al suo colore di partenza quando l'input perde il focus.
:first-child
Con questa pseudo-classe pssiamo selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.
Sintassi ed esempi
Questa la sintassi generica:
elemento:first-child {dichiarazioni;}E questa la regola su cui baseremo il nostro esempio:
p:first-child {color: white;}La regola va così interpretata: assegna il colore bianco (white) solo ai paragrafi (p) che siano il primo elemento figlio di qualsiasi altro elemento. Ora esaminiamo questa porzione di codice HTML:
<div>
<p>Sono il primo paragrafo in un div</p>
<p>Sono il secondo paragrafo in un div</p>
</div>
<form>
<p>Sono il primo paragrafo in un form</p>
<p>Sono il secondo paragrafo in un form</p>
[...]
</form>Indipendentemente dall'elemento che contiene i paragrafi, il primo avrà il testo bianco perché si trova nella posizione di primo figlio.
Articoli di approfondimento
- Definire gli stili dei link con i CSS: tra estetica e usabilità
- Bottoni con rollover
- Bottoni con rollover flessibili
- I fondamenti del rollover grafico: immagini, sprite e text-replacement
- Menu grafici con rollover e preload via CSS
- Bottoni e pulsanti Web più belli con i CSS3
- Pulsanti tridimensionali con CSS3