Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
CSS @scope lets you limit where a group of selectors can match: set a scope root, then optionally set a lower boundary that matching rules cannot cross. It also adds scoping proximity to cascade resolution. MDN lists the feature as Baseline 2026, newly available across the latest browser versions since March 2026, but older browsers and devices may not support it.
What does CSS @scope do?
@scope wraps style rules so their selectors match only within a bounded part of the document tree. This can keep component styles from matching unrelated elements elsewhere without requiring a unique class on every descendant. The W3C describes scoped style rules as applying “only within a subtree of a document, rather than matching against the entire document.” W3C CSS Scoping Module Level 1
Scoping limits selector matching; it is not a general-purpose security boundary or a guarantee of complete component isolation. If you need stronger encapsulation, assess the separate mechanism that provides it rather than treating @scope as a universal isolation feature.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →How do you scope CSS to a component?
Put the root selector after @scope and the rules inside its braces. For example, this styles images in an article body but stops matching within figures:
#1 Best Overall
@scope (.article-body) to (figure) {
img {
border: 5px solid black;
}
}.article-body is the scope root. It is included in the scope; the optional figure limit is excluded, along with the subtree below that boundary. MDN calls this a “donut scope”: rules apply within the outer region while selected nested content is left out. MDN: @scope CSS at-rule
You can omit the prelude when using @scope inside a <style> element; then the rules are scoped to that element’s enclosing parent. Root and limit positions can also take selector lists to define multiple scopes. MDN: @scope CSS at-rule
Rank #2
How does @scope affect the cascade?
Scoping proximity is a cascade criterion distinct from specificity. When the other relevant cascade criteria are tied, a declaration whose scope root is nearer to the styled element can win before specificity is considered. That means a selector’s specificity alone does not explain every result when scoped rules compete. W3C CSS Cascading and Inheritance Level 6
Inside an @scope block, MDN says bare selectors and the nesting selector & behave as though :where(:scope) were prepended, adding zero specificity. An explicit :scope selector does contribute pseudo-class specificity. MDN also notes that & handling has differed across browser engines and releases, so check compatibility before relying on edge cases. MDN: @scope CSS at-rule
What is the difference between @scope and :scope?
@scope is an at-rule that establishes a region for scoped style rules. :scope is a pseudo-class that represents a reference element for selector matching. Its reference depends on context: inside an @scope block it matches the defined scope root; at the root of a stylesheet it corresponds to the document root; and in DOM query methods it matches the element on which the method was called. MDN: :scope CSS pseudo-class
Is @scope supported in browsers?
MDN marks @scope Baseline 2026, newly available across the latest browser versions since March 2026. That status does not guarantee support in every older browser or on every older device. Check the compatibility information for the browsers your project must support before adopting it; no minimum browser versions are specified here. MDN: @scope CSS at-rule
Quick Recap
When should you use @scope?
- Use it when a bounded subtree is the goal: for example, style article images while excluding images inside figures.
- Account for the cascade: when scoped rules compete, consider proximity as well as specificity and other cascade criteria.
- Check your browser baseline: projects supporting older browsers or devices may need an alternative or a fallback strategy.
- Choose a different encapsulation mechanism if needed:
@scoperestricts selector matching within a subtree, but does not provide complete component isolation.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
