CSS
June 24, 2025
Donut scoping, a term coined by Nicole Sullivan 15 years ago, is a feature of @scope
in CSS where you can write a block of styles that apply to an element and it’s descendants until it finds another provided 2nd selector. It’s written like @scope (article.card) to (.content) {}
. The effect is like you’re selecting an area with a hole in it, like a donut.
🔗 Links
Donut Scope Basics Code:
https://codepen.io/editor/chriscoyier/pen/XJbyMJZ
Donut Scope Full Code:
https://codepen.io/editor/chriscoyier/pen/NPqEdQN
Scope in CSS Blog Post:
https://frontendmasters.com/blog/scope-in-css/
Nicole Sullivan’s Blog Post:
https://www.stubbornella.org/2011/10/08/scope-donuts/
Proximity Scope Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/proximity-scope/
DOM Blasters Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/dom-blasters/
Latest
Popular