The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.


:root { style properties }


Using :root can be useful to declare global CSS Variables:

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


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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 1.0 (1.7 or earlier) 9 9.5 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Document Tags and Contributors

 Last updated by: KeweiCodes,