Le pseudo-classi strutturali si occupano di quegli elementi basati sulla loro relazione con altri elementi.
Indice
- first-child
- last-child
- only-child
- only-of-type
- first-of-type
- last-of-type
- nth-child
- nth-of-type
- nth-last-of-type
- nth-last-child
- empty
- root
CSS 2 includeva solo una pseudo-classe strutturale in questa categoria, :first-child, mentre CSS 3 ne ha introdotti di nuove.
Le pseudo-classi strutturali di CSS 3 sono supportate in tutti i principali browser.
first-child
La pseudo-classe :first-child corrisponde al primo figlio dell'elemento selezionato.
p:first-child {}
Nel seguente esempio, questa regola si applica al primo elemento figlio del paragrafo.
<p>
<span>Primo figlio dell'elemento</span>
<span>altro testo</span>
</p>
last-child
La pseudo-classe :last-child rappresenta l'ultimo figlio dell'elemento selezionato.
p:last-child {}
Questa regola ha come target l'ultimo figlio del seguente elemento paragrafo.
<p>
<span>altro testo</span>
<span>Ultimo figlio dell'elemento</span>
</p>
only-child
La pseudo-classe :only-child corrisponde ad un elemento il cui oggetto padre non ha figli.
p:only-child {} /* elemento figlio unico */
Nell'esempio che segue notiamo che questa regola viene applicata al primo elemento perché è l'unico figlio del paragrafo. Il secondo paragrafo ha due figli, quindi nessuno di loro è interessato da questa regola.
<p>
<strong>Figlio unico</strong>
</p>
<p>
<strong>altro testo</strong>
<em>altro testo</em>
</p>
only-of-type
Il funzionamento di :only-of-type è simile a quello di :only-child. Come suggerisce il nome, il selettore :only-of-type corrisponde all'elemento selezionato solo se il padre contiene elementi figli di diverso tipo.
p:only-of-type {} /* valido solo per l'elemento <p> */
Il seguente paragrafo è interessato da questa regola perché è l'unico elemento paragrafo del suo genitore.
<div>
<h1>altro testo</h1>
<p>Testo only-of-type</p>
</div>
first-of-type
La pseudo-classe :first-of-type corrisponde al primo elemento figlio di un elemento selezionato.
p:first-of-type {} /* il primo elemento di <p> */
Nel seguente esempio corrisponde al primo elemento <p>:
<div>
<h1>Titolo</h1>
<p>testo first-of-type</p>
<p>altro testo</p>
</div>
last-of-type
La pseudo-classe :last-of-type seleziona il primo elemento che è l'ultimo figlio del suo tipo.
strong:last-of-type {} /* ultimo elemento <strong> */
Questa regola si applica all'ultimo <strong> tra gli elementi simili.
<div>
<strong>altro testo</strong>
<strong>elemento selezionato last-of-type</strong>
</div>
nth-child
La pseudo-classe :nth-child corrisponde all'n-esimo figlio del suo elemento padre.
p:nth-child(1) {} /* primo */
p:nth-child(2n) {} /* secondo */
p:nth-child(2n+1) {} /* terzo */
Si supponga di avere una serie di elementi <p> e di voler applicare uno stile solo all'n-esimo elemento.
<div>
<p>Maria Pia</p>
<p>Mario Rossi</p>
<p>Luigi Bianchi</p>
<p>Luisa Verdi</p>
</div>
Se volessimo applicare uno stile specifico al paragrafo contente il nome Mario Rossi potremmo inserire direttamente una classe o un id all'interno di <p>. Con nth-child abbiamo invece la possibilità di indicare il numero preciso dell'elemento su cui vogliamo applicare il nostro stile.
p:nth-child(2) {color: red;} /* verrà applicato lo stile all'n-esimo elemento */
Si possono anche creare dei match tra gli elementi pari e dispari. La corrispondenza dei figli pari e dispari è un'operazione comune. Per semplificare questa selezione possono essere utilizzate anche le parole chiave pari e dispari.
tr:nth-child(even) {} /* righe pari della tabella*/
tr:nth-child(odd) {} /* righe dispari della tabella */
L'argomento di :nth-child può essere un numero intero, la parola chiave pari o dispari o un'espressione sotto forma di an + b. La parola chiave n può essere anche un contatore che scorre attraverso tutti gli n elementi figlio.
Il contatore può essere negativo, in questo caso l'iterazione va a ritroso. Questa regola può essere usata per selezionare un numero specifico dei primi figli di un elemento genitore.
p:nth-child(-n+3) {} /* primi tre figli */
La matematica e gli argomenti usati per :nth-child sono validi per le prossime tre pseudo-classi, che iniziano tutte con :nth.
nth-of-type
La pseudo-classe :nth-of-type (an+b) corrisponde al b-esimo elemento di un elemento selezionato tra un gruppo di altri elementi dello stesso tipo, divisi in gruppi.
p:nth-of-type(2) {} /* secondo paragrafo del gruppo */
p:nth-of-type(2n) {} /* paragrafo pari del gruppo */
p:nth-of-type(2n+1) {} /* paragrafo dispari del gruppo */
Il comportamento di questa pseudo-classe è simile a :nth-child, ma corrisponde anche a elementi dello stesso tipo dell'elemento specificato, anziché ai figli corrispondenti all'elemento specificato.
<div>
<em>testo</em>
<p>pari</p>
<p>secondo e dispari</p>
<p>pari</p>
</div>
Simile alla pseudo-classe :nth, le parole chiavi pari e dispari possono essere usate per creare corrispondenze tra elementi dello stesso tipo.
p:nth-of-type(even) {} /* elemento dispari dello stesso tipo */
p:nth-of-type(odd) {} /* elemento pari dello stesso tipo */
nth-last-of-type
La pseudo-classe :nth-last-of-type(an + b) corrisponde all'elemento del tipo selezionato che ha an + b elementi dello stesso tipo dopo di esso. Questo comportamento è equivalente alla pseudo-classe :nth-of-type, tranne
per il fatto che si parte a contare gli elementi dal basso verso l'alto.
p:nth-last-of-type(3) {} /* terzo e ultimo paragrafo */
p:nth-last-of-type(-n+2) {} /* ultimi due paragrafi */
Possiamo vedere le regole applicate al seguente esempio. L'elemento <em> non è conteggiato perché non è del tipo specificato, in questo caso il paragrafo.
<div>
<p>terzo e ultimo</p>
<p>ultimi due</p>
<p>ultimi due</p>
<em>testo non interessato da modifica</em>
</div>
nth-last-child
La pseudo-classe :nth-last-child(an + b) rappresenta qualsiasi elemento che
ha un fratello an + b dopo di esso. Il suo comportamento è lo stesso di :nth-child, tranne per il fatto che inizia con l'elemento inferiore anziché con quello superiore.
p:nth-last-child(3) {} /* terzo e ultimo figlio */
p:nth-last-child(-n+2) {} /* ultimi due figli */
Queste regole vengono applicate agli elementi figli nel seguente esempio:
<div>
<p>terzo e ultimo</p>
<p>ultimi due</p>
<p>ultimi due</p>
</div>
empty
La pseudo-classe :empty corrisponde agli elementi selezionati che non hanno contenuto.
p:empty {} /* paragrafi vuoti */
Un elemento è considerato vuoto se non ha elementi figlio, del testo o spazi bianchi ad eccezione dei commenti al codice.
La regola precedente si applica ai seguenti due paragrafi:
<p></p>
<p><!-- commento --></p>
root
La pseudo-classe :root corrisponde all'elemento più in alto nell'albero del documento HTML. Nei documenti HTML, è sempre l'elemento <html>.
:root {} /* elemento radice */
Questa pseudo-classe è utile soprattutto quando si usa CSS con altri linguaggi, come XML, in cui l'elemento radice può variare.
