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 AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
:rootChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 9Opera Support complet 9.5Safari Support complet 1WebView Android Support complet 37Chrome Android Support complet 18Firefox Android Support complet 4Opera 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, mdnwebdocs-bot, teoli, tregagnon, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,