:scope

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.

css

/* Selects a scoped element */ :scope { background-color: lime; }

Which element(s) :scope matches depends on the context in which it is used:

When used at the root level of a stylesheet, :scope is equivalent to :root, which in a regular HTML document matches the <html> element.
When used inside a @scope block, :scope matches the block's defined scope root. It provides a way to apply styles to the root of the scope from inside the @scope block itself.
When used within a DOM API call — such as querySelector(), querySelectorAll(), matches(), or Element.closest() — :scope matches the element on which the method was called.

Syntax

css

:scope { /* ... */ }

Examples

Using `:scope` as an alternative to `:root`

This example shows that :scope is equivalent to :root when used at the root level of a stylesheet. In this case, the provided CSS colors the background of the <html> element orange.

css

:scope { background-color: orange; }

Using `:scope` to style the scope root in a `@scope` block

In this example, we use two separate @scope blocks to match links inside elements with a .light-scheme and .dark-scheme class respectively. Note how :scope is used to select and provide styling to the scope roots themselves. In this example, the scope roots are the <div> elements that have the classes applied to them.

HTML

html

<div class="light-scheme"> <p> MDN contains lots of information about <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. </p> </div> <div class="dark-scheme"> <p> MDN contains lots of information about <a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. </p> </div>

CSS

div { padding: 10px; }

css

@scope (.light-scheme) { :scope { background-color: plum; } a { color: darkmagenta; } } @scope (.dark-scheme) { :scope { background-color: darkmagenta; color: antiquewhite; } a { color: plum; } }

Result

Using `:scope` in JavaScript

This example demonstrates using the :scope pseudo-class in JavaScript. This can be useful if you need to get a direct descendant of an already retrieved Element.

HTML

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 element ids : <span id="results"></span> </p>

JavaScript

const context = document.getElementById("context"); const selected = context.querySelectorAll(":scope > div"); document.getElementById("results").textContent = [...selected] .map((element) => `#${element.id}`) .join(", ");

Result

The scope of context is the element with the id of context. The selected elements are the <div> elements that are direct children of that context — element-1 and element-2 — but not their descendants.

Specifications

Specification
Selectors Level 4 # the-scope-pseudo

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 7, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content