The CSS :root pseudo-class targets the document’s root element: the top-level html node in the DOM. It is equivalent to the html type selector, but has class-level specificity. section 2.2.2
Because the root element contains the entire page, declarations placed in a :root rule apply across the document. This makes it useful for establishing a root font size for rem units and defining custom properties inherited by descendants. section 2.2.2 section 2.6.1
Establishing a rem baseline
Set the root font size, then size lists relative to it: :root { font-size: 1em; } ul { font-size: 0.8rem; } With the browser’s default root size of 16px, 0.8rem computes to 12.8px. Nested lists retain the same computed font size because rem values remain relative to the root rather than the current element. section 2.2.2
Defining page-wide custom-property defaults
A :root rule can provide default panel colors: :root { --main-bg: #fff; --main-color: #000; } .panel { background-color: var(--main-bg); color: var(--main-color); } A dark container can redefine those properties for its descendants. The same panel then renders with dark background and white text without being restyled directly. section 2.6.1
Listing 2.8 Specifying font size using rems
:root { #1
font-size: 1em; #2
}
ul {
font-size: 0.8rem;
}
Inspect the compact listing that combines :root with a root font-size declaration and a rem-based list size. section 2.2.2
