:scope
Targets the element that is the scope of the selector. In stylesheet CSS this is usually the document root. Inside @scope it is the scoped root.
Quick example
:scope {
display: flex;
}
:scope > .item {
flex: 1;
}Examples
Reference the current scope in nested selectors
@scope (.card) {
:scope {
border: 1px solid #ccc;
}
:scope > .title {
font-weight: bold;
}
}:scope refers to the scoped root, useful inside @scope blocks.
:scope Browser Support
Widely availableSince 202088% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
27+
32+
7+
79+
Common pitfalls
:scope is rarely needed outside @scope
In ordinary stylesheets :scope is usually the document root. Inside an @scope block it is the useful way to style the scoped root itself.