: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.

css
/* 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() oder Element.closest() – entspricht :scope dem Element, auf dem die Methode aufgerufen wurde.

Syntax

css
: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></html>

CSS

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

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

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

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

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
: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.

Siehe auch