CSS :root Pseudo Classe

A :root pseudo-classe corresponde ao elemento raiz do documento — o único elemento que contém todos os outros elementos da página.

Num documento HTML, o elemento raiz é sempre <html>, portanto escrever :root é equivalente a escrever o seletor html — com uma diferença importante: :root tem maior especificidade. Por ser uma pseudo-classe, :root possui a mesma especificidade de um seletor de classe (0,1,0), enquanto o seletor de tipo html simples tem a especificidade menor de um único elemento (0,0,1). Quando uma regra em :root e uma regra em html têm como alvo a mesma propriedade, a regra :root prevalece.

Em documentos SVG e XML, :root corresponde ao elemento que está no topo da árvore do documento, portanto não está vinculado ao <html> nesses casos.

Por que `:root` vale a pena conhecer

Quase sempre seria possível substituir :root por html, então por que ele existe e por que está presente no CSS moderno? Dois motivos:

É o lugar ideal para propriedades customizadas CSS (variáveis). Declarar variáveis em :root as torna disponíveis para todos os elementos da página, já que as propriedades customizadas são herdadas ao longo da árvore. Este é o uso mais comum de :root hoje em dia.
Sua maior especificidade o torna um lugar confiável para definir padrões em nível de documento que você não quer que uma regra html { ... } perdida sobrescreva.

Sintaxe

:root {
  /* CSS declarations */
}

Definindo variáveis CSS globais em `:root`

Uma propriedade customizada é qualquer propriedade cujo nome começa com dois hífens (--brand-color). Você a lê em qualquer lugar com a função var(). Colocar essas declarações em :root é a forma idiomática de criar uma única fonte de verdade para cores, espaçamentos e fontes:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --brand: #8ebf42;
        --gap: 1.5em;
      }
      h2 {
        color: var(--brand);
      }
      p {
        padding: var(--gap);
        border-left: 4px solid var(--brand);
      }
    </style>
  </head>
  <body>
    <h2>Theme driven by :root variables</h2>
    <p>Change one value in :root and both elements update.</p>
  </body>
</html>

Como as variáveis vivem em :root, todas as regras abaixo podem lê-las, e alterar um valor em um único lugar atualiza o tema de toda a página.

Estilizando o próprio elemento raiz

:root também pode conter declarações comuns. Aqui ele define o fundo da página, e body adiciona um recuo interno para que você possa ver o elemento raiz atrás dele:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        background-color: #8ebf42;
        padding: 2em;
      }
      body {
        background-color: #eee;
        padding: 1.5em;
      }
    </style>
  </head>
  <body>
    <h2>:root selector example</h2>
    <p>Lorem ipsum is simply dummy text</p>
  </body>
</html>

Experimente Você Mesmo »

Combinando `:root` com outros seletores

:root pode ser encadeado com pseudo-elementos como ::after e com outras pseudo-classes como :hover. Um padrão útil é :root:hover, que permite que um hover em qualquer lugar da página altere uma variável e propague o novo valor para todos os elementos:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --accent: tomato;
      }
      :root:hover {
        --accent: rebeccapurple;
      }
      h2 {
        color: var(--accent);
      }
    </style>
  </head>
  <body>
    <h2>Hover anywhere to recolor this heading</h2>
  </body>
</html>

Atenção

:root não é *. :root seleciona apenas o único elemento de nível superior, enquanto o seletor universal * seleciona todos os elementos. Use :root para configurações em nível de documento, não para "selecionar tudo."
A especificidade importa. Como :root supera html, uma regra html { ... } posterior não substituirá uma regra :root na mesma propriedade — uma surpresa comum quando se mistura os dois.
Ainda é apenas um elemento. Estilizar :root estiliza <html>; isso não estiliza automaticamente <body> nem nada dentro dele.

Suporte de navegadores e especificação

:root é suportado por todos os navegadores modernos. Ele está definido na especificação de Seletores CSS:

Prática

Qual é o propósito do seletor de pseudo-classe ':root' em CSS?

É usado para selecionar o elemento raiz do documento.É usado para selecionar todos os elementos de um documento.É usado para definir propriedades globais que podem ser usadas em todos os elementos do documento.É usado para selecionar o primeiro elemento filho de um documento.

Por que :root vale a pena conhecer