Attraverso le pseudo-classi strutturali abbiamo la possibilità di selezionare gli elementi in base alla loro relazione
La pseudo-classe :first-child corrisponde al primo figlio dell'elemento padre
<html><head></head>
<body>
<div class="sezione">
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<p>Paragrafo 4</p>
<p>Paragrafo 5</p>
<p>Paragrafo 6</p>
</div>
<div class="sezione2">
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<p>Paragrafo 3</p>
<p>Paragrafo 4</p>
<p>Paragrafo 5</p>
<p>Paragrafo 6</p>
</div>
</body></html>
p:first-child {
background: blu; }
/* tutti i primi-figli con tag <p> */
div.sezione p:first-child {
background: blu; }
/* selezione il primo-figlio con tag <p> contenuto all'interno del <div> con classe .sezione */
La pseudo-classe :last-child seleziona l'ultimo figlio dell'elemento padre
p:last-child {
background:red; }
La pseudo-classe :only-child corrisponde ad un elemento il cui oggetto padre non ha figli o più semplicemente corrisponde all'elemento che è figlio-unico
<html><head></head>
<body>
<div class="sezione">
<p><strong>Paragrafo</strong><strong>1</strong></p> /* <strong> non è figlio-unico del tag <p> */
<p><strong>Paragrafo 2</strong></p> /* <strong> è figlio-unico del tag <p> */
</div>
<div class="sezione2">
<p>Paragrafo 1</p> /* <p> E' figlio-unico in quanto non sono presenti altri elementi con lo stesso tag all'interno di questa sezione */
</div>
<div class="sezione3">
<p>Paragrafo 1</p> /* <p> NON E' figlio-unico in quanto sono presenti altri elementi con lo stesso tag all'interno di questa sezione */
<p><strong>Paragrafo 2</strong></p> /* <strong> è figlio-unico del tag <p> */
</div></body></html>
p:only-child { /* seleziona tutti gli elementi <p> che risultano essere figli-unici */
background: red; }
p strong:only-child { /* seleziona tutti gli elementi <strong>, all'interno dei tag <p>, che risultano essere figli-unici */
background: yellow; }
Il funzionamento è del tutto simile a only-child: con la sola differenza che l'oggetto padre può contenere altri figli, purché di diverso tipo.
Più semplicemente selezionerà l'elemento, di "tipologia" indicato dal tag-selettore, che risulta essere presente in maniera "unica e sola" (unico-esemplare) all'interno di una sezione.
<div>
<p>Paragrafo</p>
<ul><li>Lista 1</li><li>Lista 2</li></ul>
</div>
<div>
<p>Paragrafo 1</p>
<p>Paragrafo 2</p>
<ul><li>Lista 1</li><li>Lista 2</li></ul>
<div
div p:only-of-type {
background: yellow; }
/* seleziona l'elemento presente unicamente e del tipo indicato <p> che si rivela essere "unico-esemplare" all'interno della sezione <div> */
Queste due pseudo-classi servono come è facilmente deducibile a selezionare il "primo-elemento-di-tipo" e l' "ultimo-elemento-di-tipo"
<div> <h1>Titolo</h1> <p>Paragrafo 1</p> <p>Paragrafo 2</p> <p>Paragrafo 3</p> </div
p:first-of-type {
background: red; } /*sarà selezionato il "Paragrafo 1"
p:last-of-type {
background: blu; } /*sarà selezionato il "Paragrafo 3"
Sicuramente la più interessante ed utilizzata :nth-child(n) identifica l'elemento che è l'n-esimo figlio del suo elemento padre
<div> <h1>Titolo</h1> <p>Paragrafo 1</p> /* primo figlio :nth-child(1) */ <p>Paragrafo 2</p> /* secondo figlio :nth-child(2) */ <p>Paragrafo 3</p> /* terzo figlio :nth-child(3) */ </div>
p:nth-of-type(2) {
color: red; }
E' possibile selezionare tutti i figli di una sezione ODD dispari e tutti i figli di una sezione EVEN pari
p:nth-child(odd) {
color: red; }
p:nth-child(even) {
color: yellow; }
Così facendo il "Paragrafo 1" ed il "Paragrafo 3" avranno il testo di colore rosso mentre il "Paragrafo 2" avrà il testo di colore giallo.
Nel contesto della pseudo-classe nth-child() è possibile inserire delle formule che consentono di realizzare pattern molto più complessi
SELETTORE : NTH-CHILD(an+b) { .......... ;}
p:nth-child(3n+1) {
color: red; }
La formula espressa nella pseudo-classe nth-child: è da leggere come segue: " Prendi i figli di tipo <p> a gruppi di 3 (3n), ed al primo(+1) applica la seguente regola.."
| :nth-of-type(n) | del tutto simile a :nth-child(n) ma seleziona elementi con medesimo tag, escludendo dalla selezione e allo stesso modo ammettendo la presenza di altri figli di diversa natura |
| :nth-of-type(an+b) | del tutto simile a :nth-child(an+b) ma seleziona elementi con medesimo tag, escludendo dalla selezione e allo stesso modo ammettendo la presenza di altri figli di diversa natura |
| :nth-last-of-type(n) | come :nth-of-type(n) ma parte dall'utlimo elemento ("last") del tipo di di elemento con tag indicato (procedimento inverso) |
| :nth-last-of-type(an+b) | come :nth-of-type(an+b) ma parte dall'utlimo elemento ("last") del tipo di di elemento con tag indicato (procedimento inverso) |
| :nth-last-child(n) | come :nth-child(n) ma parte dall'utlimo elemento ("last") del tipo di di elemento con tag indicato (procedimento inverso) |
| :nth-last-child(an+b) | come :nth-child(an+b) ma parte dall'utlimo elemento ("last") del tipo di di elemento con tag indicato (procedimento inverso) |
La pseudo-classe :empty corrisponde agli elementi selezionati che non hanno contenuto.
<div> <p>Paragrafo 1</p> <p></p> <p>Paragrafo 3</p> </div>
p:empty {
background: red; }
Il seguente codice applicherà lo sfondo rosso al secondo elemento <p> privo di contenuto.
La pseudo-classe :root corrisponde all'elemento più in alto nell'albero del documento HTML (DOM); in genere corrisponde sempre al tag <html>.
Può risultare utile quando si usa CSS con altri linguaggi, come XML, in cui l'elemento radice può variare.