:root - Sélecteur CSS
Résumé des caractéristiques du sélecteur :root
Description de la pseudo-classe :root.
La pseudo-classe :root cible l'élément racine du document.
En HTML :root désigne l'élément html qui est l'élément racine de toute page HTML correctement construite.
Les sélecteurs html et :root désignent donc tous les deux le même élément de la page HTML, mais attention,
la priorité de :root est plus haute (sa spécificité).
Reportez-vous à la page sur Les priorités pour plus d'informations.
Ainsi, dans l'exemple ci-dessous, le texte de la page sera en rouge :
:root {color:red;}
html {color:blue;}
Exemples d'utilisation de la pseudo-classe :root.
Définir la taille des caractères.
L'objectif est de définir une taille des caractères par défaut sur l'élément racine, et de définir la taille de caractères des autres éléments avec une unité relative. Il sera alors facile de changer la taille de tous les caractères en modifiant seulement celle de l'élément racine. Et le rapport entre les tailles de caractères sera conservé. Les unités relatives adaptées à la définition des tailles de caractères sont :
- Les pourcentages, calculés par rapport à la taille des caractères de l'élément parent.
- L'unité
rem: la taille des caractères de l'élément est déterminée par rapport à la taille des caractères de l'élément racine. - L'unité
em: la taille des caractères de l'élément est déterminée par rapport à la taille des caractères de l'élément parent.
:root {font-size:12pt;}
h1 {font-size:2rem;}
h2 {font-size:1.75rem;}
h3 {font-size:1.5rem;}
Définir des variables globales (propriétés personnalisées).
En CSS, on préfère utiliser le terme de "propriétés personnalisées" plutôt que le mot "variables". Reportez-vous à la fonction var()
pour davantage d'informations sur l'utilisation des variables en CSS.
Ces variables ont une portée, une visibilité, qui dépend du sélecteur utilisé pour les déclarer.
Pour définir des variables globales, donc utilisables sur tous les éléments de la page, le plus simple est de les déclarer avec le
sélecteur :root.
:root {
--couleur-fond: #a0c0f0;
}
Accéder à :root avec Javascript.
Deux syntaxes Javascript sont possibles pour accéder à l'élément :root.
Voici deux exemples de code pour changer la taille des caractères de l'élément racine :
document.documentElement.style.fontSize="12pt";
// ou
document.querySelector(':root').style.fontSize="12pt";
Compatibilité des navigateur avec :root.
La pseudo-classe :root ne pose aucun problème de compatibilité avec les navigateurs actuels.
:root ciblant l'élément racine du document.:rootNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Safari
Opéra
Chrome
Edge
Firefox
Safari sur IOS
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
Samsung Internet
Opéra mini
Voir aussi : pseudo-classes relatives au DOM.
Les pseudo-classes ci-dessous désignent un ou des éléments en fonction de leur position dans l'arbre du document (DOM).