: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 einen Bezugspunkt oder Scope für Selektoren darstellen, um übereinzustimmen.

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

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

  • Wenn es auf der Wurzelebene eines Stylesheets verwendet wird, ist :scope gleichwertig mit :root, was in einem regulären HTML-Dokument dem -Element entspricht.
  • Wenn es innerhalb eines @scope-Blocks verwendet wird, entspricht :scope der definierten Wurzel des Scopes des Blocks. Es bietet eine Möglichkeit, Stile auf die Wurzel des Scopes innerhalb des @scope-Blocks anzuwenden.
  • Wenn es innerhalb eines DOM-API-Aufrufs verwendet wird — wie 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 zu :root ist, wenn es auf der Wurzelebene eines Stylesheets verwendet wird. In diesem Fall färbt das bereitgestellte CSS das Hintergrund des -Elements orange.

HTML

html

CSS

css
:scope {
  background-color: orange;
}

Ergebnis

Verwendung von :scope, um die Scope-Wurzel 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- und .dark-scheme-Klasse zu stylen. Beachten Sie, wie :scope verwendet wird, um die Scope-Wurzeln selbst auszuwählen und zu stylen. In diesem Beispiel sind die Scope-Wurzeln die

-Elemente, denen die Klassen zugewiesen sind.

HTML

html

  

    MDN contains lots of information about
    HTML,
    CSS, and
    JavaScript.
  






  

    MDN contains lots of information about
    HTML,
    CSS, and
    JavaScript.

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 :scope-Pseudoklasse in JavaScript. Dies kann nützlich sein, wenn Sie einen direkten Nachfolger eines bereits abgerufenen Element erhalten möchten.

HTML

html

  

    

    

  

  

    

  





  Selected element ids :

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 Scope von context ist das Element mit der id von context. Die ausgewählten Elemente sind die

-Elemente, die direkte Kinder dieses Kontexts sind — element-1 und element-2 — aber nicht deren Nachkommen.

Spezifikationen

Specification
Selectors Level 4
# the-scope-pseudo

Browser-Kompatibilität

Siehe auch