CSS :root selector allows you to select and style the root element of the document. In HTML, the root element of the document is the <html> element.
However, since CSS is a styling language which can be used with other document formats such as XML and SVG as well. In that case, the :root selector can refer to other elements but it will always be referring to the topmost element of the document.
Since the topmost(root) element in case of HTML is always the <html> element. So, CSS styles added under the :root selector will always style the <html> element.
See this example:
Example:
:root{
background-color: yellow;
}
The :root selector is equivalent to the html{} selector and both target to the same element. But, the :root selector has a higher specificity than the html{} selector.
This means the :root will overwrite the styles specified by the html{} selector.
See this example:
Example:
:root{
background-color: yellow;
}
html{
background-color: red;
}
CSS Syntax
The syntax of the :root selector is as follows:
:root{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :root selector.
| Selector | |||||
| :root | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
