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 on which the method was called.
Syntax
:scope
Examples
Identity match
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
Direct children
A situation where the :scope
pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved Element
.
JavaScript
var context = document.getElementById('context');
var selected = context.querySelectorAll(':scope > div');
document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
return '#' + element.getAttribute('id');
}).join(', ');
HTML
<div id="context">
<div id="element-1">
<div id="element-1.1"></div>
<div id="element-1.2"></div>
</div>
<div id="element-2">
<div id="element-2.1"></div>
</div>
</div>
<p>
Selected elements ids :
<span id="results"></span>
</p>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4The definition of ':scope' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:scope
|
Chrome
Full support 27 |
Edge
Full support 79 |
Firefox Full support 32 Full support 32 Notes' Firefox 55 removes support for Disabled' From version 20 until version 32 (exclusive): this feature is behind the |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 7 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 27 |
Firefox Android Full support 32 Full support 32 Notes' Firefox 55 removes support for Disabled' From version 20: this feature is behind the |
Opera Android
Full support 15 |
Safari iOS
Full support 7 |
Samsung Internet Android
Full support 1.5 |
Support in DOM API such as in querySelector() and querySelectorAll()
|
Chrome
Full support 27 |
Edge
Full support 79 |
Firefox
Full support 32 |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 7 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 27 |
Firefox Android
Full support 32 |
Opera Android
Full support 15 |
Safari iOS
Full support 7 |
Samsung Internet Android
Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
- User must explicitly enable this feature.'
- User must explicitly enable this feature.
See also
- The
:root
pseudo-class - Locating DOM elements using selectors
Element.querySelector()
andElement.querySelectorAll()
Document.querySelector()
andDocument.querySelectorAll()
DocumentFragment.querySelector()
andDocumentFragment.querySelectorAll()
ParentNode.querySelector()
andParentNode.querySelectorAll()
:scope by Mozilla Contributors is licensed under CC-BY-SA 2.5.