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.

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

Syntaxe

:root

Exemples

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

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

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de ':root' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de ':root' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1 ?199.51
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui ? ? ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, tregagnon, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,