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

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```