CSS :scope-Pseudoklasse

Die CSS- :scope-Pseudoklasse repräsentiert das Referenzelement für Selektoren, wie das Root-Element in einem Shadow DOM oder das Element, das an querySelector() übergeben wird.

Sie wird häufig in JavaScript-DOM-Abfragen verwendet, um die Selektorenanpassung auf einen bestimmten Teilbaum zu beschränken. Beachten Sie, dass das veraltete Attribut <style scoped> in modernen Browsern nicht mehr unterstützt wird, :scope jedoch für DOM-Abfragen weiterhin relevant bleibt.

Version

Selectors Level 4

Syntax

CSS :scope-Syntax

css

:scope {
  css declarations;
}

Beispiel für den :scope-Selektor:

CSS :scope-Codebeispiel

html

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

Try it Yourself »

Practice

Worauf bezieht sich der Scope in CSS?

Der Scope in CSS bezieht sich auf den Teil des Codes, in dem eine Variable oder Funktion zugänglich ist.Der Scope in CSS bezieht sich auf die 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, die für die übertragbare Datenmenge auf einer Website festgelegt sind.

CSS :scope-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :scope-Selektor: ​

Practice ​

CSS :scope-Pseudoklasse

Version

Syntax

Beispiel für den :scope-Selektor:

Practice