:scope
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die :scope
CSS Pseudoklasse repräsentiert Elemente, die als Referenzpunkt oder Gültigkeitsbereich für Selektoren dienen, gegen die verglichen wird.
/* Selects a scoped element */
:scope {
background-color: lime;
}
Welche Elemente :scope
anspricht, hängt vom Kontext ab, in dem es verwendet wird:
- Wenn
:scope
auf der Wurzelebene eines Stylesheets verwendet wird, ist es gleichwertig mit:root
, welches in einem regulären HTML-Dokument das<html>
-Element anspricht. - Wird es innerhalb eines
@scope
-Blocks verwendet, spricht:scope
die definierte Wurzel des Gültigkeitsbereichs des Blocks an. Es bietet eine Möglichkeit, Stile auf die Wurzel des Gültigkeitsbereichs aus dem@scope
-Block selbst anzuwenden. - Wird es innerhalb eines DOM-API-Aufrufs verwendet – wie zum Beispiel
querySelector()
,querySelectorAll()
,matches()
oderElement.closest()
– entspricht:scope
dem Element, auf dem die Methode aufgerufen wurde.
Syntax
:scope {
/* ... */
}
Beispiele
Verwendung von :scope
als Alternative zu :root
Dieses Beispiel zeigt, dass :scope
gleichwertig 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.
HTML
<html></html>
CSS
:scope {
background-color: orange;
}
Ergebnis
Verwendung von :scope
zum Styling der Wurzel eines Gültigkeitsbereichs 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
entsprechend zu stylen. Beachten Sie, wie :scope
verwendet wird, um die Wurzeln der Gültigkeitsbereiche selbst auszuwählen und zu stylen. In diesem Beispiel sind die Wurzeln der Gültigkeitsbereiche die <div>
-Elemente, die die entsprechenden Klassen besitzen.
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: 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 Pseudoklasse :scope
in JavaScript. Dies kann nützlich sein, wenn Sie direkte 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 = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
Ergebnis
Der Gültigkeitsbereich 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
—, jedoch nicht deren Nachkommen.
Spezifikationen
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:scope | ||||||||||||
Support in DOM API such as in querySelector() and querySelectorAll() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.