: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 |