Scoping proximity

When scoped rules clash, the closer scope wins.

What is scoping proximity?

Scoping proximity means that when two @scope rules clash, the one whose scope root is closer to the element wins.

@scope (.light) { p { color: black; } }
@scope (.dark)  { p { color: white; } }
/* a p inside .dark inside .light is white: .dark is closer */

Level: Freelancer · More CSS terms at this level

Updated September 27, 2026