:scope
The :scope
CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.
css
/* Selects a scoped element */
:scope {
background-color: lime;
}
When used in a stylesheet, :scope
is the same as :root
, as there is currently no 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
css
:scope {
/* ... */
}
Examples
Identity match
This example demonstrates using the :scope
pseudo-class with the Element.matches()
method to match the element on which it's called. In this example, if :scope
is supported, and the paragraph is within the :root
's scope, text is displayed in the placeholder "output" paragraph.
JavaScript
js
const paragraph = document.getElementById("para");
const output = document.getElementById("output");
if (paragraph.matches(":scope")) {
output.textContent = "The first paragraph is its own scope, as expected!";
}
HTML
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 proves to be useful is when you need to get a direct descendant of an already retrieved Element
.
JavaScript
js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").innerHTML = Array.prototype.map
.call(selected, (element) => `#${element.getAttribute("id")}`)
.join(", ");
HTML
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
The scope of context
is the element with the id
of context
. The selected elements are the div
elements that are direct children of that context, element-1
and element-2
, but not their descendants.
Specifications
Specification |
---|
Selectors Level 4 # the-scope-pseudo |
Browser compatibility
BCD tables only load in the browser