mozilla
Your Search Results

    :scope

    This article is in need of a technical review.

    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Summary

    The :scope CSS pseudo-class matches 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>. If no such attribute is used on an HTML page, the reference point is the <html> element.

    Syntax

    :scope { style properties }

    Example

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

    Live 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  20 [1] 21 Not supported Not supported 7.0 [3]
    In .querySelector/.querySelectorAll (Yes) 32 Not supported Not supported 7.0
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support ? 25 [2] Not supported Not supported 7.0
    In .querySelector/.querySelectorAll ? 32 Not supported Not supported 7.0

     

    [1] Supported in Chrome 20+ by enabling the "Enable <style scoped>" or "experimental WebKit features" flag in chrome://flags.
    [2] Gecko 20 and later implement :scope pseudo-classes, but the preference layout.css.scope-pseudo.enabled must be set to true. This is only the case by default in Nightly and Aurora test versions.
    [3] Although Safari 7 registers a match of the pseudo-class, and therefore applies the CSS rule, it does not yet support style scoping itself, with the consequence that the applied CSS rule floods beyond the intended portion of the document.

     

    See also

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

    最終更新者: claudepache,