CSS :root selector

This pseudo-class in CSS matches the root element of the document. It selects the highest-level parent in the document tree or DOM.

In HTML, the element is always the root element. Although the :root is equivalent to html selector because both of them target the same element, but the :root selector has a higher specificity.

Syntax

Example

Now, let's try html selector and :root selector simultaneously. Although they both work similar but in the matter of specificity, the :root selector wins.

Example

In this example, we are going to define the same properties in html selector as well as in :root selector. The properties in :root selector will work because of higher specificity. But those properties that are not in :root selector but mentioned in html selector, then the properties of html selector will work.

Example

In the above example, we can see that the background-color and color properties are both mentioned in html as well as in :root selector, but in the output, the properties mentioned in :root selector will work. This is because of the higher specificity of the :root selector.