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.
:scope
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.
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!"; }
<p id="para"> This is a paragraph. It is not an interesting paragraph. Sorry about that. </p> <p id="output"></p>
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':scope' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | 32
|
No | 15 | 7 |
Support in DOM API such as in querySelector() and querySelectorAll()
|
27 | No | 32 | No | 15 | 7 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | ? | ? | 32
|
No | 7 | No |
Support in DOM API such as in querySelector() and querySelectorAll()
|
Yes | ? | ? | 32 | No | 7 | ? |
:root
pseudo-class
Element.querySelector()
and Element.querySelectorAll()
Document.querySelector()
and Document.querySelectorAll()
DocumentFragment.querySelector()
and DocumentFragment.querySelectorAll()
ParentNode.querySelector()
and ParentNode.querySelectorAll()
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope