Search notes:

CSS pseudo class selector :root

The :root pseudo class selector matches a document tree's root element which is the html element in HTML documents.

Because the :root pseudo class selector has higher specifity than the html element, the text of Not within div is red (as specified by :root) rather than blue in the following example.

The specified font-size in the html selector in inherited from div elements.

<html>
<head>
<style>

:root {
   color: red;
}

html {
   color: blue;
   font-size: 20px
}

div {
   color: green;
}

</style>
</head>
<body>

<div>Within div</div>

Not within div

</body>
</html>

Github repository about-css, path: /selectors/pseudo-classes/root.html

CSS pseudo class selector :root

See also