CSS/Selektoren/root

Aus SELFHTML-Wiki
CSS‎ | Selektoren(Weitergeleitet von Root)
Wechseln zu: Navigation, Suche

Der :root-Selektor ermöglicht als strukturelle Pseudoklasse, 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.

Syntax :root
Parameter {{{Parameter}}}}}
Browsersupport Details: caniuse.com
Beispiel
:root {
  --background-color: #fff;
  --background2-color: #ccc;	
  --background3-color: #ccc;		
  --accent1-color: darkred;
  --accent2-color: orange;
  --accent3-color: #fede9e;
  --font-color: #333;
  --font2-color: #666;
  --link-color: darkred;		
}

:root.dark {
  --background-color: #666;
  --background2-color: #666;	
  --background3-color: #ccc;		
  --accent1-color: darkred;
  --accent2-color: orange;	
  --accent3-color: #fede9e;	
  --font-color: #fff;
  --font2-color: orange;		
  --link-color: orange;		
}
Im :root-Selektor werden Farbpaletten mit custom properties für einen light und einen dark Mode angelegt.


Siehe auch

Weblinks

  • W3C: root Selectors Level 3