This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage 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 specification changes.
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.
/* Selects a scoped element */ :scope { background-color: lime; }
Syntax
:scope
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 (static profile - stylesheets) | (Yes)[1] | (Yes)[2] | No support | 15[1] | 7.0[1] |
In .querySelector/.querySelectorAll |
(Yes) | 32 | No support | 15[1] | 7.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support (static profile - stylesheets) | ? | (Yes)[2] | No support | No support | 7.0 |
In .querySelector/.querySelectorAll |
? | 32 | 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 yet support style scoping itself, with the consequence that the applied CSS rule floods beyond the intended portion of the document. It, thus, effectively and functionally equals to :root
.
[2] Gecko 20 (Firefox 20) and later implement :scope
pseudo-classes, but the preference layout.css.scope-pseudo.enabled
must be set to true
. It is only enabled by default in Nightly and Aurora test versions and since Gecko 32 (Firefox 32).
See also
- The
:root
pseudo-class.