Tutorial

How to Use the CSS :root Pseudo-Class Selector

CSS

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

Learn about the CSS :root pseudo-class selector, and how you might want to use it in your projects!

The CSS :root pseudo-class selector is used to select the highest-level parent of a given specification. In the HTML specification, the :root is essentially equivalent to the html selector.

In the CSS snippet below the :root and html styles will do the same thing:

:root {
  background-color: gray;
}

html {
  background-color: gray;
}

If you noticed I said :root is essentially equivalent to the html selector. In fact, the :root selector has more authority than html. This is because it’s actually considered a pseudo-class selector (like :first-child or :hover).

As a pseudo-class selector, it has more authority/higher specificity than tag selectors:

:root {
  background-color: blue;
  color: white;
}

html {
  background-color: red;
  color: white;
}

Despite the html selector coming after, the :root selector still wins, thanks to its higher specificity!

Cross-Specification

In the HTML specification, the :root pseudo-class targets the highest-level parent: html.

Since CSS is also designed for SVG and XML you can actually use :root and it will just correspond to a different element.

For example, in SVG the highest-level parent is the svg tag.

:root {
  fill: gold;
}

svg {
  fill: gold;
}

Similar to HTML, the :root and svg tags select the same element, however the :root selector will have higher specificity.

Practical Uses

What are the practical uses for :root? As we covered earlier, it’s a safe substitute for the html selector.

This means you can do anything you’d normally do with the html selector:

:root {
  margin: 0;
  padding: 0;
  color: #0000FF;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
}

If you’d like, you can refactor this code to use CSS Custom Properties to create variables at the global level!

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

p {
  color: var(--primary-color);
  font-family: var(--body-fonts);
  line-height: var(--line-height);
}

The added benefit of using :root instead of html is that you can style your SVG graphics! 🤯

:root {
  margin: 0;
  padding: 0;
  --primary-color: #0000FF;
  --body-fonts: "Helvetica", "Arial", sans-serif;
  --line-height: 1.5;
}

svg {
  font-family: var(--body-fonts);
}

svg circle {
  fill: var(--primary-color);
}

For extensive documentation on the :root pseudo-class selector, visit the Mozilla Developer Network

Creative Commons License