:root

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

A pseudo-classe CSS :root se equipara à raiz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, :root representa o elemento <html> e é idêntico ao seletor html, exceto que sua especificidade é mais alta.

css
/* Seleciona o elemento raiz do documento:
   <html> no caso do HTML */
:root {
  background: yellow;
}

Sintaxe

:root

Exemplos

Declarando variáveis CSS globais

O:root pode ser útil para declarar uma variável CSS global:

css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

Especificações

Specification
Selectors Level 4
# root-pseudo

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também