Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:root

[CSS Selector] E:root

':root' selects the root element of the HTML document. This is equivalent to using the 'html' selector, but ':root' has higher specificity (priority). Note that it does not work in IE8 and below.

A use case for ':root' is when you want to simply increase CSS specificity without using '!important'. So when you run into specificity issues, adding ':root ' at the beginning of a selector may solve the problem.

Sample Code

:root { background-color: yellow;} /* ':root' has higher specificity, so the background becomes yellow. */
html { background-color: blue;} /* ':root' has higher specificity, so this declaration is not applied. */
:root p { color: red;} /* To raise specificity without using '!important', write it this way. */
p { color: blue;} /* ':root p' has higher specificity, so this declaration is not applied. */

Browser Display Result

:root { background-color: yellow;} /* ':root' has higher specificity, so the background becomes yellow. */
html { background-color: blue;} /* ':root' has higher specificity, so this declaration is not applied. */
:root p { color: red;} /* To raise specificity without using '!important', write it this way. */
p { color: blue;} /* ':root p' has higher specificity, so this declaration is not applied. */