Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:scope
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Die:scopeCSSPseudoklasse repräsentiert Elemente, die als Referenzpunkt oder Geltungsbereich für Selektoren dienen, gegen die abgeglichen werden soll.
/* Selects a scoped element */:scope { background-color: lime;}Welche Elemente durch:scope ausgewählt werden, hängt vom Kontext ab, in dem es verwendet wird:
- Wird
:scopeauf der obersten Ebene eines Stylesheets verwendet, entspricht:scope:root, was in einem regulären HTML-Dokument dem<html>-Element entspricht. - Innerhalb eines
@scope-Blocks entspricht:scopeder Wurzel des definierten Geltungsbereichs des Blocks. Es ermöglicht, Stile auf die Wurzel des Geltungsbereichs aus dem@scope-Block selbst anzuwenden. - Bei der Verwendung innerhalb eines DOM-API-Aufrufs – wie
querySelector(),querySelectorAll(),matches()oderElement.closest()– entspricht:scopedem Element, auf dem die Methode aufgerufen wurde.
Syntax
:scope { /* ... */}Beispiele
Verwendung von:scope als Alternative zu:root
Dieses Beispiel zeigt, dass:scope auf der obersten Ebene eines Stylesheets:root gleichwertig ist. In diesem Fall färbt der bereitgestellte CSS-Code den Hintergrund des<html>-Elements orange.
:scope { background-color: orange;}Verwendung von:scope, um die Geltungsbereichswurzel in einem@scope-Block zu stylen
In diesem Beispiel verwenden wir zwei separate@scope-Blöcke, um Links innerhalb von Elementen mit einer.light-scheme- und.dark-scheme-Klasse zu matchen. Beachten Sie, wie:scope verwendet wird, um die Geltungsbereichswurzeln selbst auszuwählen und zu stylen. In diesem Beispiel sind die Geltungsbereichswurzeln die<div>-Elemente, denen die Klassen zugewiesen wurden.
HTML
<div> <p> MDN contains lots of information about <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. </p></div><div> <p> MDN contains lots of information about <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. </p></div>CSS
div { padding: 10px;}@scope (.light-scheme) { :scope { background-color: plum; } a { color: darkmagenta; }}@scope (.dark-scheme) { :scope { background-color: darkmagenta; color: antiquewhite; } a { color: plum; }}Ergebnis
Verwendung von:scope in JavaScript
Dieses Beispiel demonstriert die Verwendung der:scope-Pseudoklasse in JavaScript. Dies kann nützlich sein, wenn Sie einen direkten Nachfolger eines bereits abgerufenenElement benötigen.
HTML
<div> <div> <div></div> <div></div> </div> <div> <div></div> </div></div><p> Selected element ids : <span></span></p>JavaScript
const context = document.getElementById("context");const selected = context.querySelectorAll(":scope > div");document.getElementById("results").textContent = [...selected] .map((element) => `#${element.id}`) .join(", ");Ergebnis
Der Geltungsbereich voncontext ist das Element mit derid voncontext. Die ausgewählten Elemente sind die<div>-Elemente, die direkte Kinder dieses Kontexts sind —element-1 undelement-2 — jedoch nicht deren Nachfolger.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # the-scope-pseudo |