:scope

  • Revision slug: Web/CSS/:scope
  • Revision title: :scope
  • Revision id: 468709
  • Created:
  • Creator: velvel53
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}{{SeeCompatTable}}

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 {{htmlattrxref("scoped", "style")}} attribute of the {{HTMLElement("style")}}. If no such attribute is used on an HTML page, the reference point is the {{HTMLElement("html")}} element, making :scope equivalent to {{cssxref(":scope")}}

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

{{ EmbedLiveSample('Example', '100%', '200') }}

Specifications

Specification Status Comment
{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }} {{ Spec2('CSS4 Selectors') }} Initial definition

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatUnknown}} {{CompatNo}} [1] {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{CompatNo}} [1] {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] Gecko 20 and later implement :scope, 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.

See also

Revision Source

<p>{{ CSSRef() }}{{SeeCompatTable}}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>:scope</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes"> pseudo-class</a> matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the {{htmlattrxref("scoped", "style")}} attribute of the {{HTMLElement("style")}}. If no such attribute is used on an HTML page, the reference point is the {{HTMLElement("html")}} element, making <code>:scope</code> equivalent to {{cssxref(":scope")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox language-html" data-prism-prevent-line-number="1">
:scope { <em>style properties</em> }</pre>
<h2 id="Example">Example</h2>
<pre class="brush:html;highlight:7">
&lt;article&gt;
  The element selected by :scope has a lime background if your browser supports scoped stylesheet.
  &lt;section&gt; 
    &lt;p&gt;Outside scope.&lt;/p&gt;
  &lt;/section&gt;
  &lt;section&gt;
    &lt;style scoped&gt;
      :scope { background-color: lime; }
    &lt;/style&gt;
    &lt;p&gt;Inside scope.&lt;/p&gt;
  &lt;/section&gt;
&lt;section&gt; 
    &lt;p&gt;Outside scope.&lt;/p&gt;
  &lt;/section
&lt;/article&gt;
</pre>
<h3 id="Live_result">Live result</h3>
<div>
  {{ EmbedLiveSample('Example', '100%', '200') }}</div>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>Initial definition</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}} [1]</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{CompatNo}} [1]</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>[1] Gecko 20 and later implement <code>:scope</code>, but the preference <code>layout.css.scope-pseudo.enabled</code> must be set to <code>true</code>. This is only the case by default in Nightly and Aurora test versions.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>The {{cssxref(":root")}} <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a>.</li>
</ul>
Revert to this revision