CSS/Selektoren/scope
Aus SELFHTML-Wiki
CSS | Selektoren
Der :scope-Selektor als strukturelle Pseudoklasse repräsentiert Elemente, die als Referenzpunkt oder Bereich für Selektoren dienen, mit denen sie abgeglichen werden sollen.
Welches Element bzw. welche Elemente :scope abdeckt, hängt vom Kontext ab, in dem es verwendet wird:
- Wenn es auf der Stammebene eines Stylesheets verwendet wird, entspricht :scope dem Element :root, das in einem regulären HTML-Dokument dem Element <html> entspricht.
- Bei Verwendung innerhalb eines @scope-Blocks entspricht :scope der definierten Root-Ebene des Blocks. Es bietet eine Möglichkeit, Stile von innerhalb des @scope-Blocks selbst auf die Root-Ebene des Bereichs anzuwenden.
- Bei Verwendung innerhalb eines DOM-API-Aufrufs – wie querySelector(), querySelectorAll(), matches() oder Element.closest() – entspricht :scope dem Element, auf das die Methode angewendet wurde.
- Syntax
:scope
Beispiel
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: darkmagenta;
}
}
@scope (.dark-scheme) {
:scope {
background-color: darkmagenta;
color: antiquewhite;
}
a {
color: plum;
}
}
Wir verwenden zwei separate @scope-Blöcke, um Links innerhalb von Elementen mit einer .light-scheme- bzw. .dark-scheme-Klasse abzugleichen. Beachten Sie, wie :scope verwendet wird, um die Scope-Wurzeln selbst auszuwählen und zu stylen. In diesem Beispiel sind die Scope-Wurzeln die
-Elemente, auf die die Klassen angewendet werden.
Siehe auch
Weblinks
- CSSWG: scope-pseudo-element Selectors Level 4
- MDN: scope
- Browser-Support: caniuse.com
CSS-Selektoren
- strukturelle Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
- dynamische Pseudoklassen
