The :root pseudo-class represents the document’s root element — usually <html>. It is the go-to place for defining global CSS custom properties that power consistent themes across your site.
<html> in HTML.
--token-name.
Use tokens.
Color palette.
Media queries.
Specificity.
The CSS :root selector targets the highest-level parent in the document tree. In an HTML page, that is the <html> element.
It is especially useful for defining CSS custom properties (variables) and global defaults that every component can inherit and reuse with var().
Declare shared design tokens inside :root, then reference them anywhere: color: var(--primary-color). This keeps colors, spacing, and typography consistent and easy to update in one place.
Think of :root as your project’s settings file. Store brand colors and font sizes there once, then use var(--name) throughout your CSS instead of repeating hex codes.
The syntax for the :root pseudo-class is:
:root {
/* CSS properties */
}The :root pseudo-class targets the document root and behaves like html with higher specificity.
:root {
--primary-color: #2563eb;
--secondary-color: #16a34a;
--font-size: 1rem;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
h1 {
color: var(--secondary-color);
}:root { --color: ... } var(--color) @media :root :root vs html| Selector | Targets | Specificity |
|---|---|---|
:root | Document root (<html>) | (0, 1, 0) — pseudo-class |
html | <html> element | (0, 0, 1) — element |
--: --primary-color.var(--name) to read a variable; add a fallback: var(--color, #000).:root.--name in a smaller scope.:root for global tokens — not every style rule.var() — function to use custom property valueshtml — element selector for the same root element@media — change :root variables at breakpointsprefers-color-scheme — dark/light theme tokensvar(--token)| Question | Answer |
|---|---|
| Selector type | Pseudo-class (structural) |
| What it targets | Document root (<html> in HTML) |
| Most common use | Global CSS custom properties |
| Declare variable | :root { --name: value; } |
| Use variable | property: var(--name); |
| Browser support | All modern browsers |
:root is ideal for global design configuration:
prefers-color-scheme: dark.This card uses CSS variables defined on its wrapper (same pattern as :root tokens):
Colors and spacing come from --root-* custom properties, just like global :root variables.
Practice :root with basic variables, theme tokens, responsive font sizes, and dark mode overrides.
Define global custom properties and consume them with var().
Declare primary color, accent color, and font size once; use them across the page.
:root {
--primary-color: #2563eb;
--secondary-color: #16a34a;
--font-size: 1rem;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
h1 {
color: var(--secondary-color);
}Variables on :root are inherited by every element. Change --primary-color once and every var(--primary-color) reference updates.
Organize a small set of semantic tokens for backgrounds, text, and borders.
:root {
--bg: #f8fafc;
--surface: #ffffff;
--text: #1e293b;
--muted: #64748b;
--border: #e2e8f0;
--accent: #2563eb;
}
.card {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1rem;
}Semantic names like --text and --surface describe purpose, not raw color values. Components stay readable and theme changes stay centralized.
Adjust :root variables for breakpoints and color schemes.
Change --font-size inside a media query for fluid typography.
:root {
--font-size: 1rem;
}
@media (min-width: 768px) {
:root {
--font-size: 1.125rem;
}
}
body {
font-size: var(--font-size);
}Because every element uses var(--font-size), updating the variable in :root at a breakpoint scales typography site-wide without duplicating rules.
Override :root colors when the user prefers a dark color scheme.
:root {
--bg: #ffffff;
--text: #1e293b;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text: #f1f5f9;
}
}
body {
background: var(--bg);
color: var(--text);
}Components keep using var(--bg) and var(--text). Only the token values on :root change, so the entire page theme flips automatically.
--text-primary not --blue-500 when possible.var(--color, #2563eb) guards against missing variables.--accent on .card for scoped variants.:root blocks.color: --primary is invalid; use var(--primary).--focus-ring on :root for consistent keyboard visibility.:root WorksCustom properties like --primary-color are set on the document root.
Every element in the document tree can access inherited custom properties.
Rules reference var(--token) instead of hard-coded values.
Change a token on :root and the whole site reflects it.
The :root pseudo-class and CSS custom properties are supported in all modern browsers.
:root and var() work in Chrome, Firefox, Safari, Edge, and Opera.
Bottom line: Safe for modern projects. Use fallbacks in var() when supporting very old browsers.
The CSS :root selector is a powerful tool for defining and managing global styles, particularly CSS custom properties. Its slightly higher specificity makes it the standard home for design tokens that keep your site consistent and maintainable.
Start with a small token set on :root, consume values with var(), and extend with responsive or dark-mode overrides as your project grows.
:rootvar() fallbacks for critical values-- prefix on variables:rootUse these points when setting up global CSS variables.
<html> element.
Target--token-name.
SyntaxAnywhere.
ConsumeThan html.
TipAll browsers.
CompatOpen the HTML editor and experiment with :root, CSS variables, and var() theming.
5 people found this page helpful