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

Example

:root can be useful for declaring global CSS variables:

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

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':root' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':root' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge ? Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Last updated by: fscholz,