La pseudo-classe CSS :root

La pseudo-classe :root correspond à l'élément racine du document — l'élément unique qui contient tous les autres éléments de la page.

Dans un document HTML, l'élément racine est toujours <html>, donc écrire :root est équivalent à écrire le sélecteur html — avec une différence importante : :root a une spécificité plus élevée. Étant une pseudo-classe, :root possède la même spécificité qu'un sélecteur de classe (0,1,0), tandis que le sélecteur de type html simple a la spécificité plus faible d'un seul élément (0,0,1). Lorsqu'une règle sur :root et une règle sur html ciblent toutes deux la même propriété, la règle :root l'emporte.

Dans les documents SVG et XML, :root correspond à l'élément qui se trouve au sommet de l'arbre du document, il n'est donc pas lié à <html> dans ces contextes.

Pourquoi `:root` mérite d'être connu

On pourrait presque toujours remplacer :root par html, alors pourquoi existe-t-il et pourquoi est-il omniprésent dans le CSS moderne ? Deux raisons :

C'est le foyer des propriétés personnalisées CSS (variables). Déclarer des variables sur :root les rend disponibles pour chaque élément de la page, car les propriétés personnalisées héritent vers le bas de l'arbre. C'est l'utilisation la plus courante de :root aujourd'hui.
Sa spécificité plus élevée en fait un endroit fiable pour définir des valeurs par défaut à l'échelle du document, sans risque qu'une règle html { ... } erronée les écrase.

Syntaxe

:root {
  /* CSS declarations */
}

Définir des variables CSS globales sur `:root`

Une propriété personnalisée est toute propriété dont le nom commence par deux tirets (--brand-color). On la réutilise partout grâce à la fonction var(). Placer ces déclarations sur :root est la façon idiomatique de créer une source de vérité unique pour les couleurs, les espacements et les polices :

<!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>

Les variables étant définies sur :root, toutes les règles inférieures peuvent les lire, et modifier une seule valeur à un endroit unique re-thématise toute la page.

Appliquer des styles à l'élément racine lui-même

:root peut également porter des déclarations ordinaires. Ici, il définit l'arrière-plan de la page, et body ajoute un décalage intérieur pour que l'on puisse voir l'élément racine derrière lui :

<!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>

Essayez vous-même »

Combiner `:root` avec d'autres sélecteurs

:root se chaîne avec des pseudo-éléments tels que ::after et avec d'autres pseudo-classes telles que :hover. Un modèle pratique est :root:hover, qui permet à un survol n'importe où sur la page de modifier une variable et de cascader la nouvelle valeur partout :

<!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>

Points de vigilance

:root n'est pas *. :root ne sélectionne que l'unique élément de niveau supérieur, tandis que le sélecteur universel * sélectionne tous les éléments. Utilisez :root pour les paramètres au niveau du document, pas pour « tout sélectionner ».
La spécificité compte. Parce que :root est prioritaire sur html, une règle html { ... } ultérieure ne remplacera pas une règle :root portant sur la même propriété — une surprise fréquente lorsqu'on mélange les deux.
C'est toujours un seul élément. Styler :root revient à styler <html> ; cela ne stylise pas automatiquement <body> ni ce qui se trouve à l'intérieur.

Prise en charge par les navigateurs et spécification

:root est supporté par tous les navigateurs modernes. Il est défini dans la spécification CSS Selectors :

Exercice

Pratique

Quel est le rôle du sélecteur pseudo-classe ':root' en CSS ?

Il sert à sélectionner l'élément racine du document.Il sert à sélectionner tous les éléments d'un document.Il sert à définir des propriétés globales utilisables par tous les éléments du document.Il sert à sélectionner le premier élément enfant d'un document.

Pourquoi :root mérite d'être connu