Web/CSS/ scope

From Get docs


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

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:scope Chrome

Full support 27

Edge

Full support 79

Firefox 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 No

Opera

Full support 15

Safari

Full support 7

WebView Android

Full support ≤37

Chrome Android

Full support 27

Firefox 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 15

Safari iOS

Full support 7

Samsung Internet Android

Full support 1.5

Support in DOM API such as in querySelector() and querySelectorAll() Chrome

Full support 27

Edge

Full support 79

Firefox

Full support 32

IE

No support No

Opera

Full support 15

Safari

Full support 7

WebView Android

Full support ≤37

Chrome Android

Full support 27

Firefox Android

Full support 32

Opera Android

Full support 15

Safari iOS

Full support 7

Samsung Internet Android

Full support 1.5

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

:scope by Mozilla Contributors is licensed under CC-BY-SA 2.5.