CSS :root Pseudo Classe

La pseudo-classe :root corrisponde all'elemento radice del documento — l'unico elemento che contiene tutti gli altri elementi della pagina.

In un documento HTML l'elemento radice è sempre <html>, quindi scrivere :root equivale a scrivere il selettore html — con una differenza importante: :root ha una specificità più alta. Essendo una pseudo-classe, :root ha la stessa specificità di un selettore di classe (0,1,0), mentre il selettore di tipo html semplice ha la specificità più bassa di un singolo elemento (0,0,1). Quando una regola su :root e una regola su html puntano entrambe alla stessa proprietà, vince la regola :root.

Nei documenti SVG e XML, :root corrisponde all'elemento che si trova in cima all'albero del documento, quindi non è legato a <html> in quei contesti.

Perché vale la pena conoscere `:root`

Si potrebbe quasi sempre sostituire :root con html, allora perché esiste e perché è così diffuso nel CSS moderno? Due motivi:

È la sede delle proprietà personalizzate CSS (variabili). Dichiarare le variabili su :root le rende disponibili a ogni elemento della pagina, poiché le proprietà personalizzate ereditano lungo l'albero. Questo è l'uso più comune di :root oggi.
La sua specificità più alta lo rende un posto affidabile per impostare valori predefiniti a livello di documento che non si vuole vengano sovrascritti da una regola html { ... } introdotta per errore.

Sintassi

:root {
  /* CSS declarations */
}

Definire variabili CSS globali su `:root`

Una proprietà personalizzata è qualsiasi proprietà il cui nome inizia con due trattini (--brand-color). La si legge ovunque con la funzione var(). Inserire queste dichiarazioni su :root è il modo idiomatico per creare un'unica fonte di verità per colori, spaziature e font:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --brand: #8ebf42;
        --gap: 1.5em;
      }
      h2 {
        color: var(--brand);
      }
      p {
        padding: var(--gap);
        border-left: 4px solid var(--brand);
      }
    </style>
  </head>
  <body>
    <h2>Theme driven by :root variables</h2>
    <p>Change one value in :root and both elements update.</p>
  </body>
</html>

Poiché le variabili risiedono su :root, ogni regola sottostante può leggerle e modificare un singolo valore in un unico punto ridefinisce il tema dell'intera pagina.

Applicare stili all'elemento radice stesso

:root può anche contenere dichiarazioni ordinarie. Qui imposta lo sfondo della pagina, e body aggiunge un rientro interno in modo da poter vedere l'elemento radice dietro di esso:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        background-color: #8ebf42;
        padding: 2em;
      }
      body {
        background-color: #eee;
        padding: 1.5em;
      }
    </style>
  </head>
  <body>
    <h2>:root selector example</h2>
    <p>Lorem ipsum is simply dummy text</p>
  </body>
</html>

Provalo tu stesso »

Combinare `:root` con altri selettori

:root si concatena con pseudo-elementi come ::after e con altre pseudo-classi come :hover. Un pattern utile è :root:hover, che permette a un hover in qualsiasi punto della pagina di modificare una variabile e propagare il nuovo valore ovunque:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --accent: tomato;
      }
      :root:hover {
        --accent: rebeccapurple;
      }
      h2 {
        color: var(--accent);
      }
    </style>
  </head>
  <body>
    <h2>Hover anywhere to recolor this heading</h2>
  </body>
</html>

Insidie comuni

:root non è *. :root seleziona solo il singolo elemento di livello superiore, mentre il selettore universale * seleziona ogni elemento. Usa :root per le impostazioni a livello di documento, non per "selezionare tutto."
La specificità conta. Poiché :root ha priorità su html, una regola html { ... } successiva non sovrascriverà una regola :root sulla stessa proprietà — una sorpresa comune quando si mescolano i due.
È comunque un solo elemento. Applicare stili a :root significa applicarli a <html>; non si applicano automaticamente a <body> o a qualsiasi elemento al suo interno.

Supporto browser e specifica

:root è supportato in ogni browser moderno. È definito nella specifica CSS Selectors:

Esercitati

Pratica

Qual è lo scopo del selettore pseudo-classe ':root' in CSS?

Viene utilizzato per selezionare l'elemento radice del documento.Viene utilizzato per selezionare tutti gli elementi di un documento.Viene utilizzato per impostare proprietà globali utilizzabili su tutti gli elementi del documento.Viene utilizzato per selezionare il primo elemento figlio di un documento.

Perché vale la pena conoscere :root