: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

BCD tables only load in the browser

Siehe auch