Firefox Tomorrow

css pseudo class

`:scope` CSS pseudo-class

View on MDN ↗

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

:scope {
  background-color: orange;
}
Interactive exampleOpen the canonical MDN source to run this embedded demo.

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="/firefox/mdn/html/">HTML</a>,
    <a href="/firefox/mdn/css/">CSS</a>, and
    <a href="/firefox/mdn/javascript/">JavaScript</a>.
  </p>
</div>

<div class="dark-scheme">
  <p>
    MDN contains lots of information about
    <a href="/firefox/mdn/html/">HTML</a>,
    <a href="/firefox/mdn/css/">CSS</a>, and
    <a href="/firefox/mdn/javascript/">JavaScript</a>.
  </p>
</div>

CSS

div {
  padding: 10px;
}

@scope (.light-scheme) {
  :scope {
    background-color: plum;
  }

  a {
    color: indigo;
  }
}

@scope (.dark-scheme) {
  :scope {
    background-color: indigo;
    color: antiquewhite;
  }

  a {
    color: plum;
  }
}

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

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 = [...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.

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also