DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Der :root Selektor ermöglicht es Ihnen, das höchstgelegene "Eltern"-Element im DOM oder Dokumentbaum anzusprechen. Er ist in der CSS Selectors Level 3 Spezifikation als "strukturelle Pseudoklasse" definiert, was bedeutet, dass er verwendet wird, um Inhalte basierend auf ihrer Beziehung zu Eltern- und Geschwisterinhalten zu stylen.
In der überwiegenden Mehrheit der Fälle, auf die Sie wahrscheinlich stoßen werden, bezieht sich :root auf das <html>-Element auf einer Webseite. In einem HTML-Dokument ist das html-Element immer das höchstgelegene Elternteil, sodass das Verhalten von :root vorhersehbar ist. Da CSS jedoch eine Styling-Sprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die :root-Pseudoklasse in diesen Fällen auf verschiedene Elemente verweisen. Unabhängig von der Markup-Sprache wählt :root *immer* das oberste Element des Dokuments im Dokumentbaum aus.
Im folgenden Beispiel wird die :root-Pseudoklassen-Selektor verwendet, um eine Hintergrundfarbe hinter dem <body>-Element zu erstellen. In diesem Fall könnte der gleiche Effekt erzielt werden, indem stattdessen der html-Element-Selektor in unserem CSS verwendet wird.
Interessante Punkte
- Obwohl der
:root-Selektor und derhtml-Selektor beide auf die gleichen HTML-Elemente abzielen, ist es nützlich zu wissen, dass:roottatsächlich eine *höhere Spezifität* hat. Pseudoklassen-Selektoren (aber *nicht* Pseudoelemente) haben eine Spezifität, die einer Klasse entspricht, welche höher ist als die eines einfachen Element-Selektors.
Weitere Ressourcen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| yep | yep | yep | 9.5+ | IE9+ | yep | yep |
Danke, das ist sehr hilfreich. Ich habe mich immer gefragt, warum wir nicht einfach HTML als Elternselektor verwenden.
Ich versuche, den Body zu stylen, wenn ein Div den Fokus erhält. Ich habe dies versucht, aber ohne Erfolg. Irgendwelche Ideen?