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

Document Tags and Contributors

 Last updated by: Sheppy,