:root
Le sélecteur de pseudo-class ":root" est utilisé pour sélectionner le parent le plus haut. Il équivaut à-peu-près au selecteur "html".
Dans le code CSS ci-dessous les sélecteur ":root" et "html" auront sensiblement le même effet :
:root { background-color: gray; } html { background-color: gray; }
En fait, le sélector ":root" a plus de poids que le sélecteur "html". Tout simplement car il est consiséré comme un selecteur de pseudo-class (comme :first-child or :hover).
Variable css
Déclaration
Par convention, on déclare les variables en utilisant le sélecteur de pseudo -class ":root".
Le nom de la variable est précédé de "--".
:root { --primary-color: #FF00FF; }
Utilisation
Pour faire appel à une variable on utilise la fonction var();
body { color: var(--primary-color); }
Fonctions
- calc
- brightness,
- ...