Widely availableSupported across all major browsers. Safe to use in production.
Selectors Widely available

:scope (pseudo-class)

The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.

Selectors

Overview

The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:scope
27
79
32
7
27
7
dom api

Support in DOM API such as in `querySelector()` and `querySelectorAll()`
27
79
32
7
27
7
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • 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

CSS 
@scope (.card) {
  :scope {
    border: 1px solid #ddd;
    padding: 16px;
  }
  :scope > h2 {
    margin-top: 0;
  }
}

Live demo

sco-p withcard

CSS sco-p withcard demo.

PreviewFullscreen

nestedsco-p

CSS nestedsco-p demo.

PreviewFullscreen

sco-p. boundary

CSS sco-p. boundary demo.

PreviewFullscreen

Use cases

  • Using :scope (pseudo-class)

    The :scope CSS pseudo-class matches the scoping root, for instance the element that querySelector() is called on, or the root of a DOM subtree specified with @scope.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features