:scope | CSS Selectors & Pseudo-classes

Targets the element that is the scope of the selector. In CSS, this is usually the root element.

Quick example

:scope { display: flex; }
:scope > .item { flex: 1; }

Examples

Reference the current scope in nested selectors

.card:scope {
  border: 1px solid #ccc;
}

.card :scope > .title { /* Targets .card's direct .title child */
  font-weight: bold;
}

:scope refers to the element being styled, useful in complex selector chains.

Avoid name collisions with :scope

section:scope {
  padding: 1rem;
}

section:scope > article { /* Direct children only */
  margin: 1rem 0;
}

Use :scope to clearly mark the root element in a selector, preventing accidental matches.

:scope Browser Support

Widely available Since 2021 88% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → View spec → Learn more about Baseline →

Common pitfalls

:scope is rarely needed

:scope is mostly useful in CSS-in-JS or scoped stylesheet contexts. In regular CSS, it's redundant because the selector before the space already refers to the root.