: radice - Trucchi CSS | CSS Almanac 2025

Il :rootselettore consente di scegliere come target l'elemento "genitore" di livello più alto nel DOM o albero del documento. È definito nella specifica CSS Selectors Level 3 come una "pseudo-classe strutturale", il che significa che viene utilizzato per definire lo stile del contenuto in base alla sua relazione con il contenuto padre e fratello.

Nella stragrande maggioranza dei casi che potresti incontrare, si :rootriferisce all'elemento in una pagina web. In un documento HTML l' htmlelemento sarà sempre il genitore di livello più alto, quindi il comportamento di :rootè prevedibile. Tuttavia, poiché CSS è un linguaggio di stile che può essere utilizzato con altri formati di documenti, come SVG e XML, la :rootpseudo-classe può fare riferimento a diversi elementi in quei casi. Indipendentemente dal linguaggio di markup, :rootselezionerà sempre l'elemento più in alto del documento nell'albero del documento.

Nell'esempio seguente, il :rootselettore di pseudo-classe viene utilizzato per creare un colore di sfondo dietro l' elemento. In questo caso, lo stesso effetto potrebbe essere ottenuto utilizzando invece il htmlselettore di elementi nel nostro CSS.

Dai un'occhiata a questa penna!

Punti di interesse

Sebbene il :rootselettore e il htmlselettore mirino entrambi agli stessi elementi HTML, può essere utile sapere che in :rootrealtà ha una specificità maggiore. I selettori di pseudo-classe (ma non gli pseudo-elementi) hanno una specificità uguale a quella di una classe, che è maggiore di un selettore di elementi di base.