CSS/Selektoren/root
Aus SELFHTML-Wiki
CSS | Selektoren(Weitergeleitet von Root)
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
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
- Selektoren in CSS/strukturelle Pseudoklassen
- Farbe/Dark Mode zwei Themes oder sogar drei?
Weblinks
- W3C: root Selectors Level 3
