@scope

The @scope at-rule allows you to limit the reach of your styles to a specific part of the page. This is a native alternative to things like 'CSS Modules' or 'Styled Components', letting you keep styles local without complex naming rules.

/* Usage Example */
/* Styles inside only apply when inside a .article-body */
@scope (.article-body) {
img{
    border-radius: 8px;
  }
p{
    font-size: 1.1rem;
  }
}

This comparison shows how @scope works in a real project. View snippet →

Newly available Since 2025 86% global usage

Since 2025 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

118+
146+
17.4+
118+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC