The :root selector in CSS lets you matches the most top-level element of your document (or the document root). In the case of HTML, this is equivalent to using the html selector to select the <html> element, with the exception that the :root selector has a higher specifity (:root is a pseudo-class selector which has a specifity equals to a class selector).
CSS is not just for styling HTML documents. It can be used with other document languages, such as SVG and XML--the :root pseudo-class, in this case, refers to different elements.
We can use the :root pseudo-class selector can be used like any other selector. For example:
:root {
background: hsl(0, 100%, 50%);
color: blue;
}
This will apply the CSS styles to the <html> element.
The :root Selector vs. the html Selector
The major difference between :root and html is that :root (which is a pseudo-class selector) has a higher specificity than html ( wihc is a type selector). Let's consider this small example:
:root {
background-color: white;
}
html {
background-color: black;
}
Using :root with CSS Variables (Custom properties)
The :root selector overrides the html selector. The color of the background will be white not black.
One useful use of the :root selector is for declaring global-scope CSS variables or custom properties. For example:
:root { --bg-color: hsl(120, 100%, 50%); }
The --bg-color custom property is available on the global scope. That means the value of --bg-color which is hsl(120, 100%, 50%); can be accessed from any other DOM element. We can use the var() function to get the value:
#main{
background-color: var(--bg-color);
}
The color of the background will be hsl(120, 100%, 50%);.