Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Le pseudo-classi strutturali

Analisi dettagliata delle pseudo-classi introdotte nei CSS3
Analisi dettagliata delle pseudo-classi introdotte nei CSS3
Link copiato negli appunti

Il modulo dedicato ai selettori della nuova specifica dei CSS è sicuramente una delle novità più interessanti di questa versione. Con il precedente articolo sui selettori di attributo abbiamo iniziato una panoramica sulle novità riguardanti questo modulo. Con la versione 3 dei CSS viene introdotto per la prima volta il concetto di pseudo-classe strutturale, altra novità molto importante.

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 dell'oggetto che non possono essere raggiunte da selettori semplici o combinatori.

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 verificandone la compatibilità con i browser:

  • 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 viene naturale che 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) indentifica 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 e fornendone un esempio per ognuno.

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, in modo da focalizzarne l'attenzione. 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. E' 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.

Esempio 1.

Un altro caso in cui ci viene incontro nth-child è quello in cui abbiamo 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 (odd) della tabella. Ovviamente si poteva fare anche il contario, assegnando la regola alle righe pari (even) della tabella.

Esempio 2.

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; }

che 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 3 all'opera per capirne il funzionamento.

Viene naturale pensare che, aumentando il valore della a, aumenta lo spazio tra gli elementi selezionati e, aumentando il valore della b, aumenta 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)
tr           /*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, quindi, è 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.

Esempio 4.

Termina qui la prima parte del'articolo. Nella seconda, online tra una settimana affronteremo una per una le restanti pseudoclassi.

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.

Esempio.

E:last-child

Questa pseudo-classe seleziona l'elemento E che è l'ultimo figlio del suo oggetto genitore.

Il funzionamento è molto semplice. Continuando a utilizzare la tabella precedente, la seguente riga CSS:

tr:last-child td { background-color: yellow; }

evidenzierà l'ultima riga della tabella.

Esempio.

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>

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.

Esempio.

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; }

Esempio.

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 riga:

div p:first-of-type { background-color: yellow; }

selezionerà solo il primo paragrafo.

Esempio.

E:last-of-type

La 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 riga:

div p:last-of-type { background-color: yellow; }

selezionerà solo l'ultimo paragrafo.

Esempio.

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.

Esempio.

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>

Esempio.

Compatibilità con i browser

Nella seguente tabella ho raccolto la compatibilità di ogni pseudo-classe con i browser.

Figura 1 - Supporto delle pseudo-classi strutturali nei browser
Supporto delle pseudo-classi strutturali nei browser

Dato che il supporto da parte di Internet Explorer è pressoché nullo per ogni versione ho inserito un'unica voce IE che le comprende tutte. Le cose però cambieranno nel momento in cui uscirà IE9: Microsoft ha infatti annunciato che le pseudo-classi strutturali saranno supportate sulla prossima versione del suo browser. Notiamo poi che le ultime versioni di Firefox, Chrome e Opera supportano tutte le pseudo-classi anche se alcuni browser ancora fanno qualche errore nell'interpretazione. Fino alla versione 3 di Firefox, invece, alcune pseudo-classi non sono supportate.

Tutti gli esempi visti nell'articolo sono disponibili per il download.

Ti consigliamo anche