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>