: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

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
Selectors Level 4 (Selectors 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
32
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.
No
15
7
≤37
27
32
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.
15
7
1.5
dom_api
27
79
32
No
15
7
≤37
27
32
15
7
1.5

See also

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