The :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 :rootpseudo-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 thehtml element selector in our CSS instead.
<p>We can take advantage of being able to apply CSS to the <code><html></code> element to skip the wrapper <code>div</code> and keep our markup clean!</p>
:root {
background-color: cornflowerblue;
padding: 3em;
}
body {
background-color: white;
padding: 1.5em;
}
Points of Interest
- While the
:rootselector andhtmlselector both target the same HTML elements, it may be useful to know that:rootactually has a higher specificity. Pseudo-class selectors (butnot pseudo-elements) have a specificity equal to that of a class, which is higher than a basic element selector.
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| yep | yep | yep | 9.5+ | IE9+ | yep | yep |
Share
Tweet
Email
Leave a Reply