:root
The :root pseudo-class matches the document root element, used to declare global CSS custom properties.
Syntax
:root { --token: value; }Examples
:root {
--brand: oklch(0.55 0.18 265);
--space: 1rem;
color-scheme: light dark;
}
.btn { background: var(--brand); }
Output
Defines global design tokens on the html element that any selector can consume via var().
Notes
In HTML :root is the <html> element but has higher specificity (0,1,0) than the html type selector. It is the conventional place for global custom properties and color-scheme.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 3.5 |
| safari | 3.1 |
| edge | 12 |