CSS - :scope

Example

html;highlight:7

Copy Code

<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

Syntax

CSS

Copy Code

:scope <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a>

Description

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.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	20^[1]	21	No support	15^[1]	7.0^[3]
In `.querySelector/.querySelectorAll`	(Yes)	32	No support	15^[1]	7.0

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	25^[2]	No support	No support	7.0
In `.querySelector/.querySelectorAll`	?	32	No support	No support	7.0

[1] Supported in Chrome 20+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform 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 and since Firefox 32.

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

Specifications

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:scope

CSS CSS Pseudo-class Experimental Expérimental Layout Reference Référence Web