:scope

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

/* 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

: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.

HTML

<html></html>

CSS

:scope {
  background-color: orange;
}

Result

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

<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

@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

<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 = Array.prototype.map
  .call(selected, (element) => `#${element.getAttribute("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

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
:scope 27 79
32Firefox 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 27
32Firefox 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 4.4
dom_api 27 79 32 15 7 27 32 15 7 1.5 4.4

See also

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