The :root pseudo-class matches the root element of the document. In HTML that is the <html> element.
It selects the same node as the html type selector, but with higher specificity (0-1-0 vs 0-0-1). Authors usually declare global CSS custom properties on :root so every element can use var(--name).
Not deprecated. A long-standing structural pseudo-class; commonly paired with custom properties.
:root { { … }Example: :root { --main-color: hotpink; }
:rootDefine shared tokens once on the root, then consume them with var().
:root { … } rule.--main-color.color: var(--main-color); (or similar) on components.| Piece | Required? | Role |
|---|---|---|
:root | Yes | Targets the document root |
| Custom properties | Optional | Shared tokens like --main-color |
var(--name) | When using tokens | Reads the value on descendants |
Switch token presets. The demo box reads variables the same way descendants read :root tokens.
Each snippet focuses on :root. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Set a background on the root element.
<style>
:root {
background: yellow;
}
</style>
<p>The page root has a yellow background.</p>:root selects <html> in an HTML document.html. Prefer :root when you want higher specificity.Declare a token on :root and use it with var().
<style>
:root {
--main-color: hotpink;
}
p {
color: var(--main-color);
}
</style>
<p>This text uses the root color token.</p>--main-color lives on :root.var(). p uses var(--main-color).Group a few design tokens on :root.
<style>
:root {
--main-color: teal;
--pane-padding: 12px 16px;
}
.card {
color: white;
background: var(--main-color);
padding: var(--pane-padding);
}
</style>
<div class="card">Card using root tokens</div>:root.var().--main-color is easier to scan than a raw hex.Most confusion is about specificity and where variables are defined.
:root beats html in specificitySame element in HTML, but :root wins over a bare html rule when both set the same property.
You can declare --token on a component instead of :root to limit inheritance.
--Color and --color are different. Keep a consistent naming style.
Redefine :root variables inside @media (for example color scheme) to theme the site.
:root is the document tree root. Shadow DOM trees use other selectors such as :host.
:root is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all modern browsers (Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 9+). Custom properties on :root need IE-free modern engines.
Bottom line: *IE 9+ understands :root as a selector, but CSS custom properties need modern browsers. It is not a JavaScript runtime API.
html in HTML).--variables on :root.:root.var(--name) anywhere in the tree.One line: :root targets the document root—ideal for global design tokens via custom properties.
Style the text users highlight with the mouse or keyboard.
8 people found this page helpful