Revision 515693 of :scope

  • Revision slug: Web/CSS/:scope
  • Revision title: :scope
  • Revision id: 515693
  • Created:
  • Creator: avetisk
  • Is current revision? No
  • Comment Added Safari (desktop & mobile) support version

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  20 [1] 21 [2] {{CompatNo}} {{CompatNo}} 7+
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} 25 [2] {{CompatNo}} {{CompatNo}} 7+

 

[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.

 

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>&nbsp;20 [1]</td>
    <td>21 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>7+</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>25&nbsp;<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=508725">[2]</a></td>
    <td>{{CompatNo}}</td>
    <td>{{CompatNo}}</td>
    <td>7+</td>
   </tr>
  </tbody>
 </table>
</div>
<p>&nbsp;</p>
<p>[1]&nbsp;Supported in Chrome 20+ by enabling the "<strong>Enable &lt;style scoped&gt;</strong>" or "<strong>experimental WebKit features</strong>" flag in chrome://flags.<br />
 <span style="line-height: 1.5;">[2] Gecko 20 and later implement </span><code style="font-size: 14px;">:scope&nbsp;</code><span style="line-height: 1.5;">pseudo-classes</span><span style="line-height: 1.5;">, but the preference </span><code style="font-size: 14px;">layout.css.scope-pseudo.enabled</code><span style="line-height: 1.5;"> must be set to </span><code style="font-size: 14px;">true</code><span style="line-height: 1.5;">. This is only the case by default in Nightly and Aurora test versions.</span></p>
<p>&nbsp;</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