The :scope
CSS pseudo-class represents elements that are a reference point for selectors to match against.
/* Selects a scoped element */ :scope { background-color: lime; }
Currently, when used in a stylesheet, :scope
is the same as :root
, since there is not at this time a way to explicitly establish a scoped element. When used from a DOM API such as querySelector()
, querySelectorAll()
, matches()
, or Element.closest()
, :scope
matches the element you called the method on.
Syntax
:scope
Example
In this simple example, we demonstrate that using the :scope
pseudo-class from the Element.matches()
method matches the element on which it's called.
JavaScript
let paragraph = document.getElementById("para"); let output = document.getElementById("output"); if (paragraph.matches(":scope")) { output.innerText = "Yep, the element is its own scope as expected!"; }
HTML
<p id="para"> This is a paragraph. It is not an interesting paragraph. Sorry about that. </p> <p id="output"></p>
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 | No support | 20 (20)[1] | No support | 15 | 7.0 |
In querySelector() and querySelectorAll() |
27 | 32 (32)[1][2] | No support | 15 | 7.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | 20.0 (20)[1] | No support | No support | 7.0 |
In querySelector() and querySelectorAll() |
27 | 32.0 (32)[1][2] | No support | No support | 7.0 |
[2] Firefox 20 implements the :scope
pseudo-class, but the feature is disabled by default. To enable the feature, set the preference layout.css.scope-pseudo.enabled
to true
. Beginning with Firefox 32, this flag defaults to true
on release versions of Firefox (bug 528456).
[3] Gecko 55 (Firefox 55) removes support for <style scoped>
but not for the :scope
pseudo-class, which is still supported. <style scoped>
made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations resulted in the decision to remove it.
See also
- The
:root
pseudo-class