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

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

Siehe auch