Grow your CSS skills. Land your dream job.

:root

Last updated on:

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 :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.

Check out this Pen!

Points of Interest

  • While the :root selector and html selector both target the same HTML elements, it may be useful to know that :root actually 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.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
yep yep yep 9.5+ IE9+ yep yep

Comments

  1. Debil
    Permalink to comment#

    Can be something as:

    link[href$=style_hentai.css]:root body div#header {background: url(http://xyz.abc.cqr/logo.jpg) no-repeat;}

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".