Le pseudo-classi strutturali riguardano tutti quegli elementi basati sulla loro relazione con altri elementi del DOM.
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 da tutti i principali browser.
E:root
La pseudo-classe :root seleziona l'elemento radice della pagina. In HTML l'elemento radice è sempre l'elemento HTML; ció significa che 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}
E: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.
Primo figlio dell'elemento altro testo
E: 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 del paragrafo.
altro testo Ultimo figlio dell'elemento
E: 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.
Figlio unico
altro testoaltro testo
E: 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 */
Il seguente paragrafo è interessato da questa regola perché è l'unico elemento paragrafo del suo genitore.
altro testo
Testo only-of-type
E: first-of-type
La pseudo-classe :first-of-type si riferisce al primo elemento figlio di un elemento selezionato.
p:first-of-type {} /* il primo elemento di */
Nel seguente esempio corrisponde al primo elemento
:
Titolo
testo first-of-type
altro testo
E: 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 */
Questa regola si applica all'ultimo tra gli elementi simili.
altro testo elemento selezionato last-of-type
E:nth-child()
La pseudo-classe :nth-child() é senza dubbio, tra le pseudo-classi di nuova generazione, la più interessante: identifica l'elemento E che è l'n-esimo figlio del suo elemento padre. L'argomento posto all'interno delle parentesi, può essere un numero, una parola chiave o una formula.
I suoi utilizzi sono innumerevoli. Vediamo nel dettaglio. Supponiamo di dover costruire una semplice tabella:
| Item 1 | Item 2 | Item 3 |
|---|---|---|
| Element 1 | Element 2 | Element 3 |
| Element 4 | Element 5 | Element 6 |
| Element 7 | Element 8 | Element 9 |
| Element 10 | Element 11 | Element 12 |
| Element 13 | Element 14 | Element 15 |
Il nostro scopo é dover selezionare ed evidenziare una solo riga. Ricorrendo al vecchio metodo, avremmo semplicemente apposto una classe alla riga in questione, creando una regola ad hoc. Con la pseudo-classe E:nth-child() tutto si semplifica.
Basta infatti scegliere il numero della riga da evidenziare e apporre una regola di stile, come da esempio:
tr:nth-child(2) td {background-color: #E7E7E7;}
Abbiamo qui evidenziato la riga 2 della nostra tabella, assegnadole uno sfondo di un colore differente.
Nel caso avessimo bisogno di utilizzare diversi colori di background a righe alternate (la 1 e la 3 per esempio), possiamo utilizzare queste righe di codice
tr td {background-color: #DBEEF4} tr:nth-child(odd) td {background-color: #F5F5F5;}
Sostituendo la parola even a la parola odd, si selezionano le righe pari (2 e 4)
La flessibilitá della pseudo-classe :nth-child() permette di inserire formule per creare dei pattern piuttosto complessi.
Partendo dagli esempi prima visti, possiamo infatti contrarre la formula, ottentendo un background diverso ogni 2 celle
tr:nth-child(2n+1) td {background-color: #E2E2E2;}
Entriamo nel dettaglio della formula an + b: a e b sono dei numeri interi. Con tale pattern selezioniamo l'elemento figlio che si trova alla distanza an+b-1 dal primo elemento figlio. Il valore di b indica la distanza di partenza, ovvero dopo quanti elementi bisogna far partire la formula.
Cerchiamo di capire meglio il concetto, che fin'ora potrebbe sembrare piuttosto ostico.
tr:nth-child(3n+2) td {background-color: #E5E5E5;}
Questa formula assegna un background di colore differente ogni 3 righe della tabella, iniziando a contare dalla riga numero 2.
Se ne deduce naturalmente che, incrementando il valore di a aumenti lo spazio tra gli elementi selezionati e contestualmente, incrementando il valore di b, aumenti lo spazio iniziale della selezione.
Se il valore di a è uguale a 1 o il valore b é uguale a 0, gli stessi valori possono essere omessi.
CASI PARTICOLARI
queste sono identiche
tr:nth-child(2n)
tr:nth-child(even)queste sono identiche
tr:nth-child(2n+1)
tr:nth-child(odd)queste sono identiche
tr:nth-child(0n+5)
tr:nth-child(5)queste sono identiche
tr:nth-child(1n+0)
tr:nth-child(n+0)
tr:nth-child(n)queste sono simili ma con una 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 */
E: 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.
testopari
secondo e dispari
pari
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 */
E: 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 non è conteggiato perché non è del tipo specificato, in questo caso il paragrafo.
terzo e ultimo
ultimi due
ultimi due
testo non interessato da modifica
E: 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:
terzo e ultimo
ultimi due
ultimi due
E: 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:
