:root
Correspond à l’élément racine du document, en HTML à la balise html. L’emplacement habituel pour les variables CSS de toute la page.
Exemple
#:root {
--brand: #7c3aed;
--surface: #18181b;
--radius: 12px;
}
.card {
padding: 14px;
border-left: 4px solid var(--brand);
border-radius: var(--radius);
background: var(--surface);
}<div class="card">
<strong>Module 3 : pseudo-classes</strong>
<p style="margin: 4px 0 0; color: #a1a1aa;">La couleur de la barre, le fond et l’arrondi proviennent des variables définies sur :root.</p>
</div>Définition et utilisation
#La pseudo-classe :root sélectionne la racine de l’arbre du document. Sur une page HTML, c’est toujours l’élément <html>, donc :root et html désignent le même élément. Ils diffèrent par leur poids : :root, en tant que pseudo-classe, a une spécificité de (0, 1, 0), tandis que html, en tant que sélecteur de type, n’a que (0, 0, 1).
C’est le plus souvent là que l’on place les variables CSS (propriétés personnalisées) pour toute la page : couleurs de marque, espacements, rayons d’arrondi. Les variables se transmettent vers le bas de l’arbre, donc celles écrites sur :root sont accessibles dans chaque élément via var(--nom).
Dans :root, on place aussi ce qui concerne tout le document : color-scheme, le font-size de base à partir duquel se calculent les unités rem, ou scroll-behavior. Vous changez de thème sombre ou clair en redéfinissant les variables en un seul endroit, par exemple dans @media (prefers-color-scheme: light) ou dans la règle :root[data-theme="light"].
Syntaxe
#:root { --nom: valeur; }Utilisations courantes
#- Une seule variable de couleur change à la fois le bouton et le badge.
- Le rayon d’arrondi de tous les éléments défini en un seul endroit.
- Plusieurs variables à la fois forment un thème complet. Les composants ne changent pas, seules les valeurs changent.
- La taille de police de base du document. Le texte exprimé en
remgrandit avec elle.
Utilisations courantes en pratique
#--brand
:root { --brand: #7c3aed; }--radius
:root { --radius: 999px; }--brand et --radius
:root { --brand: #10b981; --radius: 12px; }font-size
rem grandit avec elle.:root { font-size: 20px; }Plus d’exemples
#:root {
--bg: #18181b;
--fg: #e5e5e5;
}
:root[data-theme="light"] {
--bg: #f4f4f5;
--fg: #18181b;
}
.panel {
background: var(--bg);
color: var(--fg);
}<div class="panel" style="padding: 14px; border-radius: 12px; transition: background-color 0.2s, color 0.2s;">
<p style="margin: 0 0 10px;">Les couleurs de ce panneau proviennent de variables.</p>
<button type="button" onclick="const r = document.documentElement; r.dataset.theme = r.dataset.theme === 'light' ? 'dark' : 'light'" style="padding: 6px 12px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit; cursor: pointer;">Changer de thème</button>
</div>Cliquez sur le bouton. Le script ne change que l’attribut data-theme sur l’élément <html>, et les couleurs se remplacent grâce aux variables.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Nommez les variables selon leur rôle, pas leur valeur :
--color-accentplutôt que--purple. Changer de thème n’exigera alors pas de changer les noms. - Les variables sur
:rootsont globales. Définissez sur le composant lui-même les valeurs utiles à un seul composant, par exemple.card { --gap: 12px; }. - N’oubliez pas que
:rootpèse plus quehtml. La règlehtml { … }ne redéfinira pas une propriété définie dans:root, même si elle est placée plus bas.
Entrées associées
#- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- :where()Fonctionne comme :is(), mais a toujours une spécificité nulle. Idéale pour les styles de base, faciles à redéfinir.
- font-sizeDéfinit la taille de la police.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.