Nel contesto della versione 2 dei CSS, la specifica prevede sei pseudo-classi principali. Di esse, quattro hanno trovato il loro utilizzo primario nella definizione degli stili per i diversi stati dei collegamenti ipertestuali:
:link:visited:hover:active
Importante anche la pseudo-classe :focus, utile, tra l'altro, per modificare lo stile di un campo di input nel momento in cui riceve il focus.
La lista si chiude con :first-child, attraverso la quale è possibile selezionare il primo elemento figlio di un altro elemento.
Per queste sei pseudo-classi rimandiamo alla trattazione e agli esempi della guida CSS di base.
Con la versione 3 dei CSS la lista si è notevolmente ampliata e viene introdotto il concetto di pseudo-classe strutturale.
Le pseudo-classi strutturali
Le pseudo-classi strutturali sono uno strumento che consente di selezionare gli elementi all'interno della pagina in base a delle informazioni sull'oggetto che non possono essere raggiunte da selettori semplici o combinatori.
Sintatticamente vengono definite come quelle previste nelle precedenti specifiche: una pseudo-classe si definisce attraverso il segno : seguito dal nome della pseudo-classe.
Prima di analizzare ogni pseudo-classe, facciamo una precisazione necessaria alla corretta comprensione dell'argomento. Dato un qualsiasi oggetto all'interno del DOM, se l'oggetto contiene degli elementi figli, l'indice dei figli, contrariamente ai linguaggi di programmazione, inizia da 1 e non da 0. Vediamo un semplicissimo esempio per chiarire bene le idee:
<ul>
<li>List Item 1</li> (Posizione 1)
<li>List Item 2</li> (Posizione 2)
<li>List Item 3</li> (Posizione 3)
<li>List Item 4</li> (Posizione 4)
<li>List Item 5</li> (Posizione 5)
</ul>Fatta questa doverosa premessa, vediamo ora quali sono le pseudo-classi strutturali, analizzandole una per una.
- E:root
- E:nth-child()
- E:nth-last-child()
- E:last-child
- E:only-child
- E:nth-of-type()
- E:nth-last-of-type()
- E:first-of-type
- E:last-of-type
- E:only-of-type
- E:empty
E:root
La pseudo-classe :root identifica l'elemento radice della pagina. Per pagine HTML l'elemento corrispondente è proprio html.
Un esempio è abbastanza semplice da realizzare. Dato che, come detto poc'anzi, l'elemento radice il più delle volte è proprio html, le seguenti righe di codice sono quasi equivalenti, anche se la pseudo-classe è più specifica:
html {background-color: red; color: white}
:root {background-color: red; color: white}Vediamo un semplicissimo esempio dell'utilizzo della pseudo-classe.
E:nth-child()
Sicuramente la pseudo-classe più importante e interessante introdotta in questa versione. E:nth-child(n) identifica l'elemento E che è l'n-esimo figlio del suo elemento padre.
I suoi utilizzi sono tantissimi, così come le sue potenzialità. Andiamo ad esaminare nel dettaglio tutti i possibili casi in cui possiamo utilizzare la pseudo-classe fornendo un esempio per ciascuno.
Vediamo innanzitutto un esempio del caso base, ovvero del più semplice degli utilizzi che si può fare di questa pseudo-classe. Supponiamo di avere una tabella come la seguente:
<table>
<tr><th>Cognome</th><th>Nome</th><th>Eta</th></tr>
<tr><td>Rossi</td><td>Mario</td><td>23</td></tr>
<tr><td>Verdi</td><td>Luca</td><td>33</td></tr>
<tr><td>Bianchi</td><td>Federica</td><td>24</td></tr>
<tr><td>Ferrari</td><td>Luana</td><td>23</td></tr>
<tr><td>Esposito</td><td>Giovanni</td><td>43</td></tr>
</table>e di voler evidenziare una sola delle righe. Con le versioni precedenti dei CSS era sufficiente aggiungere una classe alla riga d'interesse e creare una regola di stile ad hoc per essa. Con la nuova pseudo-classe, invece, tutto diventa più semplice. È sufficiente scegliere il numero della riga da selezionare e realizzare una regola di stile solo per lei, come nella seguente riga di codice:
tr:nth-child(4) td {background-color: yellow}In questo caso abbiamo evidenziato la riga 4 della tabella che corrisponde al terzo nome perché, ovviamente, verrà conteggiata anche la prima riga, quella dell'intestazione.
Un altro caso in cui ci viene incontro :nth-child è quello in cui si abbia bisogno di colorare in maniera alternata le righe di una tabella per migliorarne la leggibilità e l'estetica. Prima bisognava assegnare alternativamente delle regole CSS oppure utilizzare Javascript per realizzare l'effetto.
Ora invece, utilizzando la stessa tabella dell'esempio precedente, possiamo usare queste due semplicissime righe di codice:
tr td {background-color: #DBEEF4}
tr:nth-child(odd) td {background-color: #EDF6FB}La prima riga è una regola classica che assegna un colore ad ogni cella, la seconda invece assegna un colore alternativo a tutte le celle che sono su una riga dispari (si usa per questo scopo la parole chiave odd) della tabella. Ovviamente si poteva fare anche il contrario, assegnando la regola alle righe pari (con la parola chiave even) della tabella.
Passiamo ora a dei casi più complessi. Nel contesto della pseudo-classe nth-child() è possibile inserire delle formule che consentono di realizzare pattern molto più complessi.
L'esempio precedente, dunque, è possibile realizzarlo anche attraverso la seguente regola:
tr:nth-child(2n+1) td {background-color: #EDF6FB}Questa regola va ad assegnare un colore di background diverso ogni 2 celle.
Entriamo però nel dettaglio specificando come funzionano le formule. Il pattern delle formule è nella forma:
an + b
dove a e b sono numeri interi. Tale pattern identifica l'elemento figlio che si trova alla distanza an+b-1 dal primo elemento figlio. Nel caso i figli dell'elemento siano molti, il pattern selezionerà tutti i fratelli che si trovano alla stessa distanza tra di loro. Il valore contenuto dal token b indica la distanza di partenza, ovvero dopo quanti elementi bisogna far partire la formula.
Vediamo un esempio per chiarire il concetto. Utilizzando la stessa tabella precedente e aggiungendo alcuni valori in più per ampliarla, utilizziamo una regola come la seguente:
tr:nth-child(3n+2) td {background-color: #EDF6FB}La regola assegna un colore di sfondo diverso ogni tre righe della tabella, iniziando a contare però dalla seconda riga. Vediamo l'esempio all'opera per capirne il funzionamento.
Viene naturale pensare che, aumentando il valore della a, aumenti lo spazio tra gli elementi selezionati e, aumentando il valore della b, aumenti lo spazio iniziale della selezione.
Nel caso in cui il valore a sia uguale a 1 o il valore b sia uguale a 0, tali valori possono essere omessi.
Vediamo ora alcuni casi particolari, specificando come verranno interpretate le regole dal browser.
/* le seguenti regole sono del tutto identiche */
tr:nth-child(2n+0)
tr:nth-child(2n)
tr:nth-child(even)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(2n+1)
tr:nth-child(odd)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(0n+5)
tr:nth-child(5)
/* le seguenti regole sono del tutto identiche */
tr:nth-child(1n+0)
tr:nth-child(n+0)
tr:nth-child(n)
/*simile ma con specificità più bassa */
/* le seguenti regole sono del tutto identiche */
tr:nth-child(10n-1) /* selezionerà l'elemento 9, 19, 29, ecc */
tr:nth-child(10n+9) /* selezionerà l'elemento 9, 19, 29, ecc */Poniamo un attimo attenzione all'ultimo esempio. Come abbiamo potuto notare è possibile utilizzare anche valori negativi all'interno della pseudo-classe. La cosa importante quindi è districarsi bene tra le formule matematiche.
Vediamo un semplice esempio con l'utilizzo di valori negativi.
E:nth-last-child()
Funzionamento identico alla pseudo-classe precedente, E:nth-last-child(n) identifica l'elemento E che è l'n-esimo figlio del suo elemento padre partendo dall'ultimo fratello di E.
Gli esempi fatti in precedenza sono del tutto validi anche per questa pseudo-classe. Quindi, per non essere ripetitivi, analizzeremo solo il caso base.
Supponendo di avere la solita tabella dei precedenti esempi, un codice come il seguente:
tr:nth-last-child(2) td { background-color: yellow}evidenzierà la seconda riga a partire dall'ultimo elemento fratello.
E:last-child
Questa pseudo-classe seleziona l'elemento E che è l'ultimo figlio del suo elemento genitore.
Il funzionamento è molto semplice. Continuando a utilizzare la tabella precedente, la seguente regola CSS:
tr:last-child td {background-color: yellow}evidenzierà l'ultima riga della tabella.
E:only-child
E:only-child identifica un elemento E il cui oggetto padre non ha altri figli.
Supponendo di avere un codice HTML come il seguente:
<p>Lorem ipsum <span>dolor</span> sit amet.</p>
<p>Lorem ipsum <span>dolor</span> sit <span>amet</span>.</p>e utilizzando questa regola CSS:
p span:only-child {background-color: yellow}verrà inserito un colore giallo di sfondo solo allo span del primo paragrafo perché ne è presente uno solo, mentre nel secondo paragrafo ne sono presenti due.
E:nth-of-type()
La pseudo-classe identifica ogni elemento E che è l'n-esimo fratello del suo tipo all'interno del DOM.
Detto in parole più semplici, supponendo che un oggetto abbia diversi figli, di tipo diverso, con tale pseudo-classe si possono raggiungere solo gli elementi del tipo di cui abbiamo bisogno.
Vediamo un semplice esempio per capirne il funzionamento. Prendiamo come base un elemento div della pagina. Sappiamo benissimo che al suo interno possono esserci diversi tipi di elementi, tutti allo stesso livello. Se vogliamo raggiungere solo gli elementi di tipo p, distanziati ad esempio di 2, possiamo utilizzare la seguente regola:
div p:nth-of-type(2n) {background-color: yellow}Vediamo l'esempio in azione.
Come nth-child(), anche questa pseudo-classe può contenere all'interno delle formule quindi il funzionamento è del tutto simile.
E:nth-last-of-type()
Come per nth-last-child(), anche per questa pseudo-classe il funzionamento è del tutto uguale alla precedente, solo che si inizia a contare dall'ultimo elemento.
Volendo selezionare il penultimo elemento di tipo p all'interno di un div, quindi, abbiamo bisogno del seguente codice:
div p:nth-last-of-type(2) {background-color: yellow}E:first-of-type
Questa pseudo-classe seleziona il primo elemento E che è il primo figlio del suo tipo. Concettualmente essa coincide all'uso di :nth-of-type(1).
Dato il codice utilizzato negli esempi precedenti, la seguente regola:
div p:first-of-type {background-color: yellow}selezionerà solo il primo paragrafo.
E:last-of-type
Questa pseudo-classe seleziona il primo elemento E che è l'ultimo figlio del suo tipo. Concettualmente essa coincide all'uso di :nth-last-of-type(1).
Dato il codice utilizzato negli esempi precedenti, la seguente regola:
div p:last-of-type {background-color: yellow}selezionerà solo l'ultimo paragrafo.
E:only-of-type
Il funzionamento è del tutto simile a E:only-child con la sola differenza che l'oggetto padre può contenere altri figli, purché di diverso tipo.
Quindi, dato un codice come il seguente:
<div>
<p>Lorem ipsum dolor sit amet.</p>
<ul><li>List item 1</li><li>List item 2 </li></ul>
</div>
<div>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<ul><li>List item 1</li><li>List item 2 </li></ul>
<div>e questo codice CSS:
div p:only-of-type {background: yellow}verrà selezionato solo il primo paragrafo del primo contenitore perché, nel secondo contenitore, sono presenti due paragrafi e non solo uno.
E:empty
Questa pseudo-classe identifica ogni elemento E che non contiene figli. E:empty include anche i nodi di testo. Quindi, un semplice paragrafo che contiene del testo al suo interno non corrisponderà.
Data la regola CSS
p:empty {background-color: yellow}dei seguenti paragrafi, solo il primo corrisponderà:
<p></p>
<p><span></span></p>
<p>Lorem ipsum</p>Tabella del supporto sui browser
| Pseudo-classi strutturali |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| E:link | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
| E:visited | 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
| E:active | 8.0+ | 1.0+ | 1.0+ | 1.0+ | 7.0+ |
| E:hover | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 7.0+ |
| E:focus | 8.0+ | 1.0+ | 1.0+ | 1.0+ | 7.0+ |
| E:first-child | 7.0+ | 1.0+ | 1.0+ | 1.0+ | 7.0+ |
| E:root | 9.0+ | 1.0+ | 1.0+ | 1.0+ | 9.5+ |
| E:nth-child() | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:nth-last-child() | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:last-child | 9.0+ | 1.0+ | 3.1+ | 1.0+ | 9.5+ |
| E:only-child | 9.0+ | 1.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:nth-of-type() | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.0+ |
| E:nth-last-of-type() | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:first-of-type | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:last-of-type | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:only-of-type() | 9.0+ | 3.5+ | 3.1+ | 1.0+ | 9.5+ |
| E:empty | 9.0+ | 1.5+ | 2.0+ | 1.0+ | 9.5+ |