W3cubDocs

/CSS

: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⁩.

The :root CSS pseudo-class matches 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.

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

Syntax

:root {
  /* ... */
}

Examples

Declaring global CSS variables

:root can be useful for declaring global CSS variables:

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

Specifications

Specification
Selectors Level 4> # root-pseudo>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`:root`	1	12	1	9.5	1	18	4	14	1	1.0	37	1