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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge ? Firefox Support complet 1IE Support complet 9Opera Support complet 9.5Safari Support complet 1WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

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