W3cubDocs

/CSS

:scope

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

const paragraph = document.getElementById("para");
const output = document.getElementById("output");

if (paragraph.matches(":scope")) {
  output.textContent = "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

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

<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
Selectors Level 4
# the-scope-pseudo

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
:scope 27 79
32Firefox 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.
 No 15 7 4.4 27
32Firefox 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.
 15 7 1.5
dom_api 27 79 32 No 15 7 4.4 27 32 15 7 1.5

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:scope