Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The :scope CSS pseudo-class represents elements that are a reference point for selectors to match against.

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

In HTML, a new reference point can be defined using the scoped attribute of the <style> element. If no such attribute is used on the page, the reference point is the <html> element.

Syntax

:scope

Example

<article>
  <p>The element targeted by :scope has a lime background
    if your browser supports scoped stylesheets.</p>
  <section> 
    <p>Outside the scope.</p>
  </section>
  <section>
    <style scoped>
      :scope {
        background-color: lime;
      }
    </style>
    <p>Inside the scope!</p>
  </section>
  <section> 
    <p>Outside the scope.</p>
  </section>
</article>

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':scope' in that specification.
Working Draft Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (static profile - stylesheets) No support[1] 20 (20)[2] No support 15[1] 7.0[1]
In .querySelector() and .querySelectorAll() 27 32 (32)[2][3] No support 15[1] 7.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (static profile - stylesheets) No support 20.0 (20)[2] No support No support 7.0
In .querySelector/.querySelectorAll 27 32.0 (32)[2][3] No support No support 7.0

[1] Although Chrome and Safari register a match of the pseudo-class, and therefore apply the CSS rule, they do not support style scoping itself, with the consequence that the applied CSS rule floods beyond the intended portion of the document. Thus, it effectively and functionally equates to :root.

[2] Firefox 20 implements the :scope pseudo-class, but the feature is disabled by default. To enable the feature, set the preference layout.css.scope-pseudo.enabled to true. Beginning with Firefox 32, this flag defaults to true on release versions of Firefox (bug 528456).

[3] Gecko 55 (Firefox 55) removes support for <style scoped> but not for the :scope pseudo-class, which is still supported.

See also

Schlagwörter des Dokuments und Mitwirkende

 Zuletzt aktualisiert von: Sheppy,