: root - CSS-Tricks | CSS-Almanach 2025

Mit der :rootAuswahl können Sie auf das übergeordnete Element der höchsten Ebene im DOM oder im Dokumentbaum abzielen. Es wird in der CSS Selectors Level 3-Spezifikation als „strukturelle Pseudoklasse“ definiert, dh es wird verwendet, um Inhalte basierend auf ihrer Beziehung zu übergeordneten und Geschwisterinhalten zu formatieren.

:rootBezieht sich in der überwiegenden Mehrheit der Fälle, auf die Sie wahrscheinlich stoßen, auf das Element auf einer Webseite. In einem HTML-Dokument ist das htmlElement immer das übergeordnete Element auf höchster Ebene, sodass das Verhalten von :rootvorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die :rootPseudoklasse in diesen Fällen auf verschiedene Elemente verweisen. Unabhängig von der Auszeichnungssprache :rootwird immer das oberste Element des Dokuments im Dokumentbaum ausgewählt.

Im folgenden Beispiel wird der :rootPseudoklassen-Selektor verwendet, um eine Hintergrundfarbe hinter dem Element zu erstellen . In diesem Fall könnte der gleiche Effekt erzielt werden, indem stattdessen die htmlElementauswahl in unserem CSS verwendet wird.

Schauen Sie sich diesen Stift an!

Sehenswürdigkeiten

Während der :rootSelektor und der htmlSelektor beide auf dieselben HTML-Elemente abzielen, kann es nützlich sein zu wissen, dass diese :roottatsächlich eine höhere Spezifität aufweisen. Pseudo-Klassenselektoren (aber keine Pseudoelemente) haben eine Spezifität, die der einer Klasse entspricht und höher ist als ein Basiselement-Selektor.