CSS : la pseudo-classe :root

La pseudo-classe :root sélectionne l'élément qui représente la racine du document.

En HTML, l'élément racine est toujours <html>.

Dans SVG et XML, la pseudo-classe :root peut faire référence à un ancêtre de niveau supérieur.

La pseudo-classe :root peut être associée à des pseudo-éléments (par ex. ::after) et à d'autres pseudo-classes (par ex. :hover).

Version

Selectors Level 4

Selectors Level 3

Syntaxe

Syntaxe CSS :root

css

:root {
  css declarations;
}

Exemple de la pseudo-classe `:root` :

Exemple de code CSS :root

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        background-color: #8ebf42;
        padding: 2em;
      }
      body {
        background-color: #eee;
        padding: 1.5em;
      }
    </style>
  </head>
  <body>
    <h2>:root selector example</h2>
    <p>Lorem ipsum is simply dummy text</p>
  </body>
</html>

Try it Yourself »

Pratique

Quel est l'objectif du sélecteur de pseudo-classe ':root' en CSS ?

Il est utilisé pour sélectionner l'élément racine du document.Il est utilisé pour sélectionner tous les éléments d'un document.Il est utilisé pour définir des propriétés globales qui peuvent être utilisées sur tous les éléments du document.Il est utilisé pour sélectionner le premier élément enfant d'un document.

CSS : la pseudo-classe :root ​

Version ​

Syntaxe ​

Exemple de la pseudo-classe :root : ​

Pratique ​

CSS : la pseudo-classe :root

Version

Syntaxe

Exemple de la pseudo-classe `:root` :

Pratique