:scope CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die :scope CSS Pseudoklasse repräsentiert Elemente, die einen Bezugspunkt oder Geltungsbereich für Selektoren darstellen, gegen die abgeglichen wird.
/* Selects a scoped element */
:scope {
background-color: lime;
}
Welche Elemente :scope zugeordnet werden, hängt vom Kontext ab, in dem es verwendet wird:
- Wenn es auf der obersten Ebene eines Stylesheets verwendet wird, ist
:scopegleichbedeutend mit:root, was in einem regulären HTML-Dokument dem<html>-Element entspricht. - Wenn es innerhalb eines
@scope-Blocks verwendet wird, entspricht:scopeder definierten Geltungsbereichswurzel des Blocks. Es bietet eine Möglichkeit, Stile auf die Wurzel des Geltungsbereichs innerhalb des@scope-Blocks selbst anzuwenden. - Bei Verwendung innerhalb eines DOM-API-Aufrufs – wie
querySelector(),querySelectorAll(),matches()oderElement.closest()– entspricht:scopedem Element, auf das die Methode angewendet wurde.
Syntax
:scope {
/* ... */
}
Beispiele
Verwendung von :scope als Alternative zu :root
Dieses Beispiel zeigt, dass :scope gleichbedeutend mit :root ist, wenn es auf der obersten Ebene eines Stylesheets verwendet wird. In diesem Fall färbt das bereitgestellte CSS 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 zuzuordnen. 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 sind.
HTML
<div class="light-scheme">
<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 class="dark-scheme">
<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
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: indigo;
}
}
@scope (.dark-scheme) {
:scope {
background-color: indigo;
color: antiquewhite;
}
a {
color: plum;
}
}
Resultat
Verwendung von :scope in JavaScript
Dieses Beispiel demonstriert die Verwendung der :scope Pseudoklasse in JavaScript. Dies kann nützlich sein, wenn Sie einen direkten Nachkommen eines bereits abgerufenen Element benötigen.
HTML
<div id="context">
<div id="element-1">
<div id="element-1-1"></div>
<div id="element-1-2"></div>
</div>
<div id="element-2">
<div id="element-2-1"></div>
</div>
</div>
<p>
Selected element ids :
<span id="results"></span>
</p>
JavaScript
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").textContent = [...selected]
.map((element) => `#${element.id}`)
.join(", ");
Resultat
Der Geltungsbereich von context ist das Element mit der id context. Die ausgewählten Elemente sind die <div> Elemente, die direkte Kinder dieses Kontexts sind — element-1 und element-2 — aber nicht deren Nachkommen.
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # the-scope-pseudo |