CSS :root Selector

:root {
  background: red;
  color: white;
}

Meaning

The :root selector selects the root element of a tree representing the document.

In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

Version: CSS3

:root {
  css declarations;
}

The numbers in the table specify the first browser version that fully supports the property.

:root {
  --bg-color: red;
  --main-color: green;
}

h1 {
  background: var(--bg-color);
}

p {
  color: var(--main-color);
}