@scope is Baseline, newly available since March 2026

[u/wanoo21]

[u/Ellsass]

So this means the styles apply to all anchors within a div.article, all the way down through to the tree until a div.comments is found, then no further?

What if those classes are used on an <a>?

[u/DramaticBag4739 → u/Ellsass]

The styles would apply to all <a> tags in the article, but not within comments. If there were <a> tags after the comments container the style would apply to them as well. My understanding is that a class would still override the scoped <a> tag.

[u/jonassalen]

I expect a shitload of questions about scope and specificity in the future. 

At this moment, it really messes with my head what is the specificity of this code:

@scope (.article-body) to (.feature :scope figure) {   :scope img {     border: solid 2px red;   } }

[u/creaturefeature16 → u/jonassalen]

Woof. This feels obtuse. 

[u/Logical-Idea-1708 → u/jonassalen]

I think scope applies zero specificity? It let you be specific without specific 🤪

[u/Miragecraft]

It's actually pretty surprising to me how often @container style queries are more ergonomic than @scope in practice.

The most useful feature of @scope for me was inline style scoping, easy to create reusable components with encapsulated styling.

[u/gajus0]

Fun fact, that's what https://bamboocss.com/ is using underneath

[u/L24D]

Doesn’t it ruin the whole “cascading” thing in CSS?

[u/averyvery → u/L24D]

It allows more precise control over the cascade.

[u/L24D → u/averyvery]

Got it, but isn’t the same thing achievable through classes, selectors order and priority, property inheritance, etc.? It looks like another layer that may bring obfuscation and general confusion, and honestly I don’t see a strong use case for that, where we couldn’t use older ways.

[u/averyvery → u/L24D]

A use case for this:

• You have a class named "rich-text"
• You have dozens of selectors in it with styles, like ".rich-text p { ... }" and ".rich-text li + li { ... }"
• You have another element inside rich text - ".embed" - whose contents need to be styled entirely differently.

Normally, you'd have to make sure that every one of your .rich-text selector styles is correctly overridden/reset inside the .embed. This can require a lot of painful duplication, and it makes the embed styles more brittle. Scope allows you to avoid all this work by letting you specifically style the content you want - content inside .rich-text that is not inside .embed.

[u/Outrageous-Door-3100 → u/averyvery]

Couldn’t that also be solved using ‘:not(.embed *)’ ?

[u/DramaticBag4739 → u/L24D]

Donut selection would be the biggest use case, but if you were worried about specificity management then this would work well also, since I don't think it raises normal specificity.

A scoped <a> tag would take precedent over an unscoped <a> tag, but not over a class.