@scope in CSS Explained with Examples (Complete Guide)

@scope in CSS

The @scope rule lets you apply CSS only inside a specific section of the page — without adding extra classes everywhere.

It helps prevent style conflicts and makes CSS more component-based.

1. Simple Example

Only the h2 inside .card becomes blue

Outside h2 is not affected

------------------------------------------------------------------

2. Scoped Button Styling

Only button in .section-a turns blue

.section-b button stays default

------------------------------------------------------------------

3. Using :scope with @scope

1. :scope refers to .box
2. Adds border only to .box
3. Styles p inside .box
4. Outside elements are NOT affected

------------------------------------------------------------------