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; } 

: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 # the-scope-pseudo

See also

The :root pseudo-class Locating DOM elements using selectors Element.querySelector() and Element.querySelectorAll() Document.querySelector() and Document.querySelectorAll() DocumentFragment.querySelector() and DocumentFragment.querySelectorAll()

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language