:scope (pseudo-class)
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 27 | 79 | 32 | 7 | 27 | 7 | |
dom api Support in DOM API such as in `querySelector()` and `querySelectorAll()` | 27 | 79 | 32 | 7 | 27 | 7 |
- Firefox 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.
Syntax
@scope (.card) {
:scope {
border: 1px solid #ddd;
padding: 16px;
}
:scope > h2 {
margin-top: 0;
}
}Live demo
Use cases
-
Using :scope (pseudo-class)
The :scope CSS pseudo-class represents elements that are a reference point, or scope, for selectors to match against.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.