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
Pour contribuer à ces données de compatibilité, vous pouvez envoyer une pull request sur ce dépôt: https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
:root | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 9 | Opera Support complet 9.5 | Safari Support complet 1 | WebView Android Support complet 37 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android ? | Safari iOS Support complet 1 | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Compatibilité inconnue
- Compatibilité inconnue