: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);
}