: figlio unico - Trucchi CSS | CSS Almanac 2025

La :only-childproprietà selector pseudo-classe in CSS rappresenta un elemento che ha un elemento genitore e il cui elemento genitore non ha altri elementi figli. Questo sarebbe lo stesso di :first-child:last-childo :nth-child(1):nth-last-child(1), ma con una specificità inferiore.

div p:only-child ( color: red; )

Ad esempio, se annidiamo i paragrafi all'interno di un simile ...


This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent

Ora possiamo modellare l'unico

del nostro primo figlio . Il successivo e i suoi figli non avranno mai uno stile in quanto il contenitore genitore contiene più di un figlio (cioè i tag p).

p:only-child ( color:red; )

Potremmo anche combinare pseudo-classi aggiuntive come questo esempio che seleziona il primo paragrafo all'interno del nostro div annidato e l'unico figlio di div.contain.


Hello World
some more children

div.contain div:only-child :first-child ( color: red; )

:only-childnon funzionerà come selettore se l'elemento genitore contiene più di un figlio con un tag identico. Per esempio…


paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2

div.contain div:only-child ( color: red; )

Ciò comporterà che nessun div erediterà il colore rosso poiché il genitore contiene più di 1 figlio (i 3 div senza nome).

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.