MDN will be in maintenance mode for a brief period Tuesday June 2, from around 10:00 AM until no later than 12:00 PM Pacific (in UTC, Tuesday June 2, 5:00 PM to 7:00 PM). There should be no disruption in service.

You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/en-US/docs/Web/CSS/:root

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:rootChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,