:root - Selector CSS

:root

Summary of characteristics of the :root selector

Quick description
Pseudo-class targeting the root element of the document (in HTML, the root element is the HTML element).
Status
Standard
W3C Module
Selectors
References (W3C)
 🡇  
 🡅  
Document status: WD (Working Draft)
Document status: REC (Recommendation)

Description of the :root pseudo-class.

The pseudo-class :root targets to the root element of the document.
In HTML, :root refers to the html element, which is the root element of any properly constructed HTML page.

The selectors html and :root therefore both refer to the same HTML page element, but be careful, :root has a higher priority (its specificity). Refer to the page on Priorities for more information.

Thus, in the example below, the page text will be in red.:

:root {color:red;} html {color:blue;}

Example of use of the pseudo-class :root.

Set the font size.

The goal is to set a default font size on the root element, and to define the font size of other elements using a relative unit. It will then be easy to change the size of all fonts by modifying only that of the root element. And the ratio between font sizes will be maintained. The relative units suitable for defining font sizes are:

  • Percentages, calculated relative to the font size of the parent element.
  • The rem unit: the size of the characters of the element is determined relative to the size of the characters of the root element.
  • The em unit: the size of an element's characters is determined relative to the size of the parent element's characters.
:root {font-size:12pt;} h1 {font-size:2rem;} h2 {font-size:1.75rem;} h3 {font-size:1.5rem;}

Define global variables (custom properties).

In CSS, it is preferable to use the term "custom properties" rather than the word "variables". Refer to the function var() for more information on using variables in CSS.

These variables have a scope, a visibility, which depends on the selector used to declare them. To define global variables, which can therefore be used on all elements of the page, the simplest way is to declare them with the :root selector.

:root { --bg-color: #a0c0f0; }

Access :root with JavaScript.

Two JavaScript syntaxes are possible to access the element :root. Here are two code examples to change the font size of the root element:

document.documentElement.style.fontSize="12pt"; // or document.querySelector(':root').style.fontSize="12pt";

Browser compatibility with :root.

The pseudo-class :root poses no compatibility issues with current browsers.

Column 1
Browser support for the pseudo-class selector :root targeting the root element of the document.
1
:root
pseudo-class
Estimated overall support.
96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

QQ Browser

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Safari

Opéra

Chrome

Edge

Firefox

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the :root pseudo-class.

  • Selectors Level 3

    Introduction of the pseudo-class :root in level 3 of the selectors specification.
    WD
    August 03, 1999
    Working Draft.
    CR
    November 13, 2001
    Candidate Recommendation.
    PR
    December 15, 2009
    Proposed for recommendation.
    REC
    September 29, 2011
    Recommendation .

  • Selectors Level 4

    No changes regarding the pseudo-class :root at this level of the specification.
    WD
    September 29, 2011
    Working Draft.
    CR
    PR
    REC

See also: DOM-related pseudo-classes.

The pseudo-classes below refer to one or more elements based on their position in the document tree (DOM).

:empty
Langue française
Pseudo-class targeting elements without content.
:first-child
Langue française
Pseudo-class targeting the first child of an element, in the document order.
:first-of-type
Langue française
Pseudo-class targeting the first elements of each type, in the order of the document.
:last-child
Langue française
Pseudo-class targeting the last child of an element in the document order.
:last-of-type
Langue française
Pseudo-class targeting the last elements of each type in the document order.
:nth-child()
Langue française
Pseudo-class targeting a descendant based on its position in the document order.
⚠
:nth-col()
Langue française
Pseudo-class targeting one of the columns in a grid container based on its number.
:nth-last-child()
Langue française
Pseudo-class targeting an element based on its number, starting from the end, and in document order.
⚠
:nth-last-col()
Langue française
Pseudo-class targeting one of the columns in a grid container, starting the count from the end.
:nth-last-of-type()
Langue française
Pseudo-class targeting an element by its number, counting only elements of the same type and starting from the end.
:nth-of-type()
Langue française
Pseudo-class targeting an element based on its number, counting only elements of the same type.
:only-child
Langue française
Pseudo-class targeting elements that are the only children of their parent.
:only-of-type
Langue française
Pseudo-class indicating elements that are the only child of their parent, considering only elements of the same type.
:root
Pseudo-class targeting the root element of the document (in HTML, the root element is the HTML element).
:scope
Langue française
Targets the current element. Useful in the case of nested rules (nested CSS).
::part()
Langue française
Pseudo-element that targets a sub-element in the page's shadow tree (created by template).