:scope CSS pseudo-class
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.
/* Selects a scoped element */
:scope {
background-color: lime;
}
Which element(s) :scope matches depends on the context in which it is used:
- When used at the root level of a stylesheet,
:scopeis equivalent to:root, which in a regular HTML document matches the<html>element. - When used inside a
@scopeblock,:scopematches the block's defined scope root. It provides a way to apply styles to the root of the scope from inside the@scopeblock itself. - When used within a DOM API call — such as
querySelector(),querySelectorAll(),matches(), orElement.closest()—:scopematches the element on which the method was called.
Syntax
:scope {
/* ... */
}
Examples
Using :scope as an alternative to :root
This example shows that :scope is equivalent to :root when used at the root level of a stylesheet. In this case, the provided CSS colors the background of the <html> element orange.
:scope {
background-color: orange;
}
Using :scope to style the scope root in a @scope block
In this example, we use two separate @scope blocks to match links inside elements with a .light-scheme and .dark-scheme class respectively. Note how :scope is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the <div> elements that have the classes applied to them.
HTML
<div class="light-scheme">
<p>
MDN contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
<div class="dark-scheme">
<p>
MDN contains lots of information about
<a href="/en-US/docs/Web/HTML">HTML</a>,
<a href="/en-US/docs/Web/CSS">CSS</a>, and
<a href="/en-US/docs/Web/JavaScript">JavaScript</a>.
</p>
</div>
CSS
@scope (.light-scheme) {
:scope {
background-color: plum;
}
a {
color: indigo;
}
}
@scope (.dark-scheme) {
:scope {
background-color: indigo;
color: antiquewhite;
}
a {
color: plum;
}
}
Result
Using :scope in JavaScript
This example demonstrates using the :scope pseudo-class in JavaScript. This can be useful if you need to get a direct descendant of an already retrieved Element.
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 element ids :
<span id="results"></span>
</p>
JavaScript
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");
document.getElementById("results").textContent = [...selected]
.map((element) => `#${element.id}`)
.join(", ");
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
:scope
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Support in DOM API such as in
querySelector() and querySelectorAll()
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.