Usage of Pseudo-class selector :root

August 03, 2020

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.

👉 Uses

What are the uses for :root? It’s a safe substitute for the htmlselector.

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);
}

Up next