:scope
======

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.

#### HTML


```html
<html></html>
```


#### CSS


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


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


```js
const context = document.getElementById("context");
const selected = context.querySelectorAll(":scope > div");

document.getElementById("results").innerHTML = 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
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `@scope` at-rule
* The `:root` pseudo-class
* Locating DOM elements using selectors
* `Element.querySelector()` and `Element.querySelectorAll()`
* `Document.querySelector()` and `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` and `DocumentFragment.querySelectorAll()`