CSS :scope Pseudo-Klasse - CSS lernen

Die CSS-Pseudo-Klasse :scope trifft auf das Element zu, gegen das ein Selektor aufgelöst wird — das sogenannte Referenzelement. Bei einfachen DOM-Abfragen ist das Referenzelement das Element, auf dem die Abfragemethode aufgerufen wird; in einem Shadow DOM ist es das Shadow Root.

Diese Seite erklärt, was "Scope" für einen Selektor bedeutet, warum :scope in erster Linie ein JavaScript-Werkzeug und kein Stylesheet-Werkzeug ist, die zwei wichtigsten Stellen, an denen es das Verhalten verändert, und die dabei zu beachtenden Fallstricke.

Was das Referenzelement ist

Jeder Selektor wird relativ zu einem bestimmten Element abgeglichen. Wenn Sie CSS in einem Stylesheet schreiben, ist das Referenzelement das Dokument-Root, daher entspricht :scope dort :root und ist für sich allein selten nützlich.

:scope wird bedeutsam, wenn das Referenzelement nicht das Root ist — am wichtigsten dann, wenn Sie das DOM per JavaScript abfragen:

element.querySelector(selector) und element.querySelectorAll(selector) lösen den Selektor gegen element auf. Hier bezieht sich :scope auf element selbst.
Die Abfragemethoden eines ShadowRoot verwenden das Shadow Root als Referenzelement.

Ohne :scope wird ein Selektor, der an element.querySelector() übergeben wird, dennoch gegen den gesamten Teilbaum abgeglichen, also nicht am element verankert. Das überrascht viele Entwickler — siehe den Fallstrick weiter unten.

Warum man es verwendet

Der Hauptgrund für :scope ist, einen Selektor an dem Element zu verankern, das Sie abfragen, um direkte Kinder zu treffen oder anderweitig auszudrücken "relativ zu hier":

// Match only sections that are direct children of container.
container.querySelectorAll(':scope > section');

:scope ist innerhalb der oben aufgeführten Abfragemethoden bedeutsam (querySelector, querySelectorAll und die dynamische Element.matches()-Prüfung). Es hat keine besondere Wirkung in closest() oder in gewöhnlichen Stylesheet-Regeln.

Hinweis: Das veraltete <style scoped>-Attribut, das früher erlaubte, einen <style>-Block nur innerhalb seines übergeordneten Elements anzuwenden, wurde aus Browsern entfernt. Style-Scoping erfolgt heute mit Shadow DOM (oder Build-Time-Tooling), und :scope bleibt als DOM-Abfrage-Hilfsmittel erhalten.

Version

Selectors Level 4

Syntax

In einem Stylesheet ist die Syntax wie bei jeder anderen Pseudo-Klasse:

:scope {
  /* declarations — equivalent to :root in a normal stylesheet */
}

In JavaScript wird es innerhalb des Selektor-Strings übergeben:

element.querySelectorAll(':scope > .child');

Beispiel: Eine Abfrage am Element verankern

Im folgenden Beispiel wählt container.querySelector(':scope > section') nur das <section>-Element aus, das ein direktes Kind von .container ist. Der gefundene Abschnitt wird eingefärbt, um zu bestätigen, dass die Abfrage ihn gefunden hat.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        margin: 40px auto;
        max-width: 700px;
        background-color: #eeeeee;
        padding: 20px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
    <script>
      const container = document.querySelector('.container');
      const scopeElement = container.querySelector(':scope > section');
      scopeElement.style.backgroundColor = '#1c87c9';
      scopeElement.style.color = '#fff';
    </script>
  </body>
</html>

Probier es selbst »

Häufiger Fallstrick: Direkte Kinder auswählen

Der häufigste Grund für die Verwendung von :scope ist die Auswahl der unmittelbaren Kinder des Elements, das Sie abfragen. Ein Kombinator wie > .x kann nicht für sich allein stehen — element.querySelector('> .x') wirft einen SyntaxError. Sie benötigen eine linke Seite, und :scope liefert sie:

<ul id="list">
  <li>A</li>
  <li>
    <ul>
      <li>B (nested)</li>
    </ul>
  </li>
</ul>

const list = document.getElementById('list');

// SyntaxError — "> li" is not a complete selector:
// list.querySelectorAll('> li');

// Correct: only the direct <li> children of #list (A and the one wrapping the nested list),
// NOT "B (nested)".
list.querySelectorAll(':scope > li');

Ohne :scope würde list.querySelectorAll('li') auch das verschachtelte B-Element zurückgeben, weil ein einfacher Nachfahren-Selektor den gesamten Teilbaum erfasst. :scope > ist der idiomatische Weg, um zu sagen "direkte Kinder des Elements, das ich abfrage".

Browser-Unterstützung

:scope wird in allen modernen Browsern für die DOM-Abfragemethoden unterstützt. Als Styling-Regel in einem normalen Stylesheet hat es keine Wirkung über das Verhalten von :root hinaus.

Übung

Worauf bezieht sich der Scope in CSS?

Der Scope in CSS bezieht sich auf den Teil des Codes, in dem auf eine Variable oder Funktion zugegriffen werden kann.Der Scope in CSS bezieht sich auf Styles, die nur innerhalb des Codeblocks verfügbar sind, in dem sie deklariert wurden.Der Scope in CSS bezieht sich auf die Größe des Anzeigebildschirms für die Webseite.Der Scope in CSS bezieht sich auf die Grenzen für die Datenmenge, die auf einer Website übertragen werden kann.