: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 you called the method on.

Syntax

:scope

Example

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 Status Comment
Selectors Level 4
The definition of ':scope' in that specification.
Working Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:scopeChrome Full support 27Edge No support NoFirefox Full support 32
Notes
Full support 32
Notes
Notes 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 support 20 — 32
Disabled
Disabled From version 20 until version 32 (exclusive): this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 32
Notes
Full support 32
Notes
Notes 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.
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 15Safari iOS Full support 7Samsung Internet Android No support No
Support in DOM API such as in querySelector() and querySelectorAll()Chrome Full support 27Edge No support NoFirefox Full support 32IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 27Firefox Android Full support 32Opera Android Full support 15Safari iOS Full support 7Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also