Pseudoclase CSS :root

La pseudoclase :root coincide con el elemento raíz del documento — el único elemento que contiene todos los demás elementos de la página.

En un documento HTML, el elemento raíz siempre es <html>, por lo que escribir :root equivale a escribir el selector html — con una diferencia importante: :root tiene mayor especificidad. Al ser una pseudoclase, :root tiene la misma especificidad que un selector de clase (0,1,0), mientras que el selector de tipo html simple tiene la menor especificidad de un elemento único (0,0,1). Cuando una regla en :root y una regla en html apuntan a la misma propiedad, la regla de :root gana.

En documentos SVG y XML, :root coincide con cualquier elemento que esté en la cima de ese árbol de documento, por lo que no está vinculado a <html> allí.

Por qué vale la pena conocer `:root`

Casi siempre podrías reemplazar :root con html, entonces ¿por qué existe y por qué está en todas partes del CSS moderno? Dos razones:

Es el hogar de las propiedades personalizadas de CSS (variables). Declarar variables en :root las hace disponibles para cada elemento de la página, ya que las propiedades personalizadas se heredan hacia abajo en el árbol. Este es el uso más común de :root hoy en día.
Su mayor especificidad lo convierte en un lugar confiable para establecer valores predeterminados para todo el documento que no quieras que una regla html { ... } suelta anule.

Sintaxis

:root {
  /* CSS declarations */
}

Definir variables CSS globales en `:root`

Una propiedad personalizada es cualquier propiedad cuyo nombre comienza con dos guiones (--brand-color). Se puede leer en cualquier lugar con la función var(). Colocar estas declaraciones en :root es la forma idiomática de crear una única fuente de verdad para colores, espaciados y fuentes:

<!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 las variables viven en :root, cada regla debajo de ella puede leerlas, y cambiar un valor en un solo lugar rediseña toda la página.

Estilizar el propio elemento raíz

:root también puede llevar declaraciones ordinarias. Aquí establece el fondo de la página, y body añade un bloque interior para que puedas ver el elemento raíz detrás de él:

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

Pruébalo tú mismo »

Combinar `:root` con otros selectores

:root se encadena con pseudoelementos como ::after y con otras pseudoclases como :hover. Un patrón útil es :root:hover, que permite que un hover en cualquier parte de la página cambie una variable y aplique en cascada el nuevo valor en todas partes:

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

Aspectos a tener en cuenta

:root no es *. :root selecciona únicamente el elemento de nivel superior, mientras que el selector universal * selecciona todos los elementos. Usa :root para configuraciones a nivel de documento, no para "seleccionar todo."
La especificidad importa. Dado que :root supera a html, una regla posterior html { ... } no anulará una regla de :root sobre la misma propiedad — una sorpresa común cuando se mezclan ambos.
Sigue siendo un solo elemento. Estilizar :root estiliza <html>; no estiliza automáticamente <body> ni nada dentro de él.

Soporte en navegadores y especificación

:root es compatible con todos los navegadores modernos. Está definido en la especificación de Selectores CSS:

Práctica

¿Cuál es el propósito del selector de pseudoclase ':root' en CSS?

Se usa para seleccionar el elemento raíz del documento.Se usa para seleccionar todos los elementos de un documento.Se usa para establecer propiedades globales que se pueden usar en todos los elementos del documento.Se usa para seleccionar el primer elemento hijo de un documento.

Por qué vale la pena conocer :root