CSS  »  Articoli  »  CSS 3 

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.

Altri articoli

Altre guide

Altre newsletter