:root

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La pseudo-classe :root permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, :root ciblera donc l'élément <html> et aura le même comportement que le sélecteur html mais sa spécificité sera plus forte.

css
/* Sélectionne l'élément racine du document */
/* Pour un document HTML, c'est <html> */
:root {
  background: yellow;
}

Syntaxe

Error: could not find syntax for this item

Exemples

:root peut être utile lorsqu'on déclare des propriétés CSS personnalisées globales :

css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Spécifications

Specification
Selectors Level 4
# root-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser