:root selector allows you to target the highest-level "parent" element in the DOM, or document tree. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
In the overwhelming majority of cases you're likely to encounter,
:root refers to the
<html> element in a webpage. In an HTML document the
html element will always be the highest-level parent, so the behaviour of
:root is predictable. However, since CSS is a styling language that can be used with other document formats, such as SVG and XML, the
:root pseudo-class can refer to different elements in those cases. Regardless of the markup language,
:root will always select the document's top-most element in the document tree.
In the example below, the
:root pseudo-class selector is used to create a background color behind the
<body> element. In this case, the same effect could be achieved by using the
html element selector in our CSS instead.
htmlselector both target the same HTML elements, it may be useful to know that
:rootactually has a higher specificity. Pseudo-class selectors (but not pseudo-elements) have a specificity equal to that of a class, which is higher than a basic element selector.