Sélecteur :ROOT

Rôle

Le sélecteur root est une pseudo-classe désigné par la syntaxe :root qui permet de cibler la racine d’un document HTML, à savoir la balise <html>.

Note : ne pas confondre la balise <body> qui représente le corps du document (l’ensemble du contenu qui s’affiche) et la balise <html> qui représente le document en entier.

Dans l’exemple ci-dessous, la balise root fait référence au document HTML (bordure gris) et le sélecteur :root * permet de cibler tous les autres éléments à partir de la racine comme le corps du document body et le paragraphe p (bordure rose).

:root{
  border-left: solid 10px silver;
}
:root *{
 border-left: solid 10px pink;
 padding: 5px;
}
<p>Lorem ipsum dolor sit amet</p>

Version : CSS3

Testez vous-même ce sélecteur

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
Le sélecteur root est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9.

A voir aussi

:not(selector)
:empty 
:target 
:lang(langage)