:scope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.

Die:scopeCSS Pseudoklasse repräsentiert Elemente, die als Referenzpunkt oder Bereich für Selektoren dienen, gegen die sie abgeglichen werden können.

css

/* Selects a scoped element */:scope {  background-color: lime;}

Welche Elemente von:scope erfasst werden, hängt vom Kontext ab, in dem es verwendet wird:

Wenn es auf der Wurzelebene eines Stylesheets verwendet wird, entspricht:scope:root, das in einem regulären HTML-Dokument das<html>-Element erfasst.
Wenn es innerhalb eines@scope Blocks verwendet wird, entspricht:scope der definierten Bereichswurzel des Blocks. Es bietet eine Möglichkeit, Stile auf die Wurzel des Bereichs aus dem@scope Block selbst anzuwenden.
Wenn es innerhalb eines DOM API-Aufrufs verwendet wird — wie zum BeispielquerySelector(),querySelectorAll(),matches() oderElement.closest() — entspricht:scope dem Element, auf dem die Methode aufgerufen wurde.

Syntax

css

:scope {  /* ... */}

Dieses Beispiel zeigt, dass:scope gleichwertig zu: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.

css

:scope {  background-color: orange;}

Verwendung von`:scope`, um die Bereichswurzel in einem`@scope` Block zu stylen

In diesem Beispiel verwenden wir zwei separate@scope Blöcke, um Links innerhalb von Elementen mit einer.light-scheme bzw..dark-scheme Klasse abzugleichen. Beachten Sie, wie:scope verwendet wird, um die Bereichswurzeln selbst auszuwählen und zu stylen. In diesem Beispiel sind die Bereichswurzeln die<div>-Elemente, denen die Klassen zugewiesen sind.

HTML

html

<div>  <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>  <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

div {  padding: 10px;}

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 abgerufenenElement benötigen.

HTML

html

<div>  <div>    <div></div>    <div></div>  </div>  <div>    <div></div>  </div></div><p>  Selected element ids :  <span></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 voncontext ist das Element mit derid voncontext. Die ausgewählten Elemente sind die<div>-Elemente, die direkte Kinder dieses Kontexts sind —element-1 undelement-2 — jedoch nicht deren Nachfahren.