CSS/Selektoren/Pseudoklasse/strukturelle Pseudoklasse/root

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mithilfe des Selektors :root ist es möglich, die Wurzel eines Dokumentes anzusprechen. In HTML-Dokumenten ist dies immer <html>. Deshalb ist :root {foo: bar;} dasselbe wie html {foo: bar} allerdings mit höherer Spezifität.

  • CSS 3.0
  • IE 9
  • Firefox
  • Chrome
  • Safari
  • Opera
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS-Beispiel: Pseudoklasse root</title> <style> :root { color: red; } html { color: blue; } body { width: 40em; } </style> </head> <body> <h1>Demonstration der Pseudoklasse <code>:root</code></h1> <p>Von Selektoren mit gleicher ...</p> </body> </html>
Von Selektoren mit gleicher Spezifität überschreibt normalerweise der letztaufgeführte Selektor die Einstellungen des vorhergehenden. Deshalb würde man eine blaue Schrift erwarten. In Browsern, die :root korrekt interpretieren, ist die Schrift des Dokumentes jedoch rot.