: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 Referenzpunkt oder eine Bereichebene (scope) für Selektoren darstellen, gegen die abgeglichen wird.
/* Selects a scoped element */
:scope {
background-color: lime;
}
Welche(s) Element(e) :scope abgleicht, hängt vom Kontext ab, in dem es verwendet wird:
- Bei Verwendung auf der Wurzelebene eines Stylesheets ist
:scopegleichbedeutend mit:root, was in einem regulären HTML-Dokument dem<html>-Element entspricht. - Bei Verwendung innerhalb eines
@scope-Blocks stimmt:scopemit der definierten Wurzel des Bereichs überein. Es bietet eine Möglichkeit, Styles auf die Wurzel des Bereichs anzuwenden, von innerhalb des@scope-Blocks selbst. - Bei Verwendung innerhalb eines DOM-API-Aufrufs — wie
querySelector(),querySelectorAll(),matches()oderElement.closest()— stimmt:scopemit dem Element überein, auf dem die Methode aufgerufen wurde.
Syntax
:scope {
/* ... */
}
Beispiele
Verwendung von :scope als Alternative zu :root
Dieses Beispiel zeigt, dass :scope gleichbedeutend mit :root ist, wenn es auf der Wurzelebene 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 zum Stylen der Bereichebenen-Wurzel in einem @scope-Block
In diesem Beispiel verwenden wir zwei separate @scope-Blöcke, um Links innerhalb von Elementen mit den Klassen .light-scheme und .dark-scheme jeweils abzugleichen. Beachten Sie, wie :scope verwendet wird, um die Bereichebenen-Wurzeln selbst auszuwählen und zu stylen. In diesem Beispiel sind die Bereichebenen-Wurzeln 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;
}
}
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 Nachfahren 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(", ");
Ergebnis
Der Bereich von context ist das Element mit der id von context. Die ausgewählten Elemente sind die <div>-Elemente, die direkte Kinder dieses Kontextes sind — element-1 und element-2 — jedoch nicht deren Nachfahren.
Geschwister-Kombinatoren rechts von :scope passen nie
Die durch :scope definierte Beziehung ist immer von Vorfahre zu Nachfahre von der Bereichebenen-Wurzel. Daher erzeugt das Setzen eines Geschwister-Kombinators rechts von :scope einen Selektor, der nie passen kann, da kein Element sowohl im Selektorbereich sein als auch ein Geschwister von :scope sein kann.
:scope + p {
color: red;
}
:scope ~ * {
color: red;
}
Selektoren, die nie passen, können eine Warnung in den Browser-DevTools auslösen.
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # the-scope-pseudo |