← Back to pseudo-classes

CSS Pseudo-class / Element

:root

Structural

Selects the highest-level parent element in the document, typically the html element.

Syntax

:root { }

Example

:root { --color-accent: #3dffa0; }

Common use cases

  • Defining global CSS custom properties
  • Setting base font size for rem calculations
  • Theming variables accessible everywhere

Practical developer insight

:root has higher specificity than html selector — use it to define CSS custom properties (variables) that need to be globally accessible.

Related

colorvar():where()