Web/CSS/ root

From Get docs


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 Status Comment
Selectors Level 4The definition of ':root' in that specification. Working Draft No change.
Selectors Level 3The definition of ':root' in that specification. Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:root Chrome

Full support 1

Edge

Full support 12

Firefox

Full support 1

IE

Full support 9

Opera

Full support 9.5

Safari

Full support 1

WebView Android

Full support 37

Chrome Android

Full support 18

Firefox Android

Full support 4

Opera Android

Full support 14

Safari iOS

Full support 1

Samsung Internet Android

Full support 1.0

Legend

Full support  
Full support


See also

:root by Mozilla Contributors is licensed under CC-BY-SA 2.5.