MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

Obsolete since Gecko 55 (Firefox 55 / Thunderbird 55 / SeaMonkey 2.52)
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

In JavaScript, when used with Element.querySelector, Element.querySelectorAll, or Element.closest, :scope refers to the element on which these methods are invoked. For example, document.body.querySelector(":scope") returns the body element. While support for :scope has been removed for CSS, this use of :scope continues to be supported.

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

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.

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

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] (Yes)[2] No support 15[1] 7.0[1]
In .querySelector/.querySelectorAll 27 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 (Yes)[2] No support No support 7.0
In .querySelector/.querySelectorAll 27 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] Gecko 20 (Firefox 20) implements :scope pseudo-classes, but the preference layout.css.scope-pseudo.enabled must be set to true. Beginning with Gecko 32 (Firefox 32), this flag defaults to true on release versions of Firefox (bug 528456).

[3] Gecko 55 (Firefox 55) removes support for <style scoped> and its corresponding :scope pseudo-class. This does not affect :scope in querySelector/querySelectorAll (bug 1291515).

See also

ドキュメントのタグと貢献者

 最終更新者: mfluehr,