CSS :root Pseudo-Klasse

Die :root Pseudo-Klasse entspricht dem Wurzelelement des Dokuments — dem einzigen Element, das alle anderen Elemente der Seite enthält.

In einem HTML-Dokument ist das Wurzelelement immer <html>, weshalb :root dem Schreiben des html-Selektors entspricht — mit einem wichtigen Unterschied: :root hat eine höhere Spezifität. Da es eine Pseudo-Klasse ist, trägt :root dieselbe Spezifität wie ein Klassen-Selektor (0,1,0), während der einfache html-Typ-Selektor die niedrigere Spezifität eines einzelnen Elements hat (0,0,1). Wenn eine Regel auf :root und eine Regel auf html dieselbe Eigenschaft betreffen, gewinnt die :root-Regel.

In SVG- und XML-Dokumenten entspricht :root dem Element, das sich an der Spitze des Dokumentbaums befindet — es ist dort also nicht an <html> gebunden.

Warum `:root` es wert ist, es zu kennen

Man könnte :root fast immer durch html ersetzen — warum existiert es dann und warum ist es überall im modernen CSS zu finden? Zwei Gründe:

Es ist der Heimatort für CSS Custom Properties (Variablen). Das Deklarieren von Variablen auf :root macht sie für jedes Element der Seite verfügbar, da Custom Properties im Baum nach unten vererbt werden. Das ist die mit Abstand häufigste Verwendung von :root heutzutage.
Seine höhere Spezifität macht es zu einem zuverlässigen Ort, um dokumentweite Standardwerte festzulegen, die nicht von einer zufälligen html { ... }-Regel überschrieben werden sollen.

Syntax

:root {
  /* CSS declarations */
}

Globale CSS-Variablen auf `:root` definieren

Eine Custom Property ist jede Eigenschaft, deren Name mit zwei Bindestrichen beginnt (--brand-color). Man liest sie an beliebiger Stelle mit der Funktion var() aus. Das Platzieren dieser Deklarationen auf :root ist die idiomatische Methode, eine einzige Quelle der Wahrheit für Farben, Abstände und Schriften zu erstellen:

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

Da die Variablen auf :root leben, können alle nachfolgenden Regeln sie lesen, und das Ändern eines Werts an einer einzigen Stelle gestaltet die gesamte Seite neu.

Das Wurzelelement selbst stylen

:root kann auch gewöhnliche Deklarationen tragen. Hier setzt es den Seitenhintergrund, und body fügt einen eingerückten Block hinzu, sodass man das Wurzelelement dahinter sehen kann:

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

Probier es selbst »

`:root` mit anderen Selektoren kombinieren

:root lässt sich mit Pseudo-Elementen wie ::after und mit anderen Pseudo-Klassen wie :hover verketten. Ein praktisches Muster ist :root:hover, das es erlaubt, durch ein Hover irgendwo auf der Seite eine Variable zu ändern und den neuen Wert überall weiterzugeben:

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

Fallstricke

:root ist nicht *. :root wählt nur das eine Element auf oberster Ebene aus, während der universelle Selektor * jedes Element auswählt. Verwende :root für Einstellungen auf Dokumentebene, nicht um „alles auszuwählen".
Spezifität ist wichtig. Da :root höher rangiert als html, überschreibt eine spätere html { ... }-Regel eine :root-Regel für dieselbe Eigenschaft nicht — eine häufige Überraschung, wenn man beide mischt.
Es ist immer noch nur ein Element. Das Stylen von :root stylt <html>; es stylt nicht automatisch <body> oder irgendetwas darin.

Browser-Unterstützung und Spezifikation

:root wird von jedem modernen Browser unterstützt. Es ist in der CSS-Selektoren-Spezifikation definiert:

Übungen

Übung

Was ist der Zweck des ':root'-Pseudo-Klassen-Selektors in CSS?

Er wird verwendet, um das Wurzelelement des Dokuments auszuwählen.Er wird verwendet, um alle Elemente eines Dokuments auszuwählen.Er wird verwendet, um globale Eigenschaften festzulegen, die für alle Elemente des Dokuments verwendet werden können.Er wird verwendet, um das erste Kind-Element eines Dokuments auszuwählen.

Warum :root es wert ist, es zu kennen