:root

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CSS-Pseudoklasse :root entspricht dem Wurzelelement eines Baumes, der das Dokument darstellt. In HTML repräsentiert :root das <html>-Element und ist identisch mit dem Selektor html, mit der Ausnahme, dass seine Spezifität höher ist.

css
/* Selects the root element of the document:
   <html> in the case of HTML */
:root {
  background: yellow;
}

Syntax

css
:root {
  /* ... */
}

Beispiele

Globale CSS-Variablen deklarieren

:root kann nützlich sein, um globale CSS-Variablen zu deklarieren:

css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Spezifikationen

Specification
Selectors Level 4
# root-pseudo

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch