The @scope rule applies styles only inside a specific part of the page. It gives you component-level styling without BEM naming, CSS Modules or deeply nested selectors.

Basic scope

css">@scope ( .lotgrafix-card ) {
    img {
        width: 100%;
        border-radius: 8px;
    }

    h3 {
        margin: 0 0 8px;
    }

    a {
        color: orangered;
    }
}

The rules for img, h3 and a only affect elements inside .lotgrafix-card.

Donut scope: set a lower boundary

Use to to stop the scope before a nested element. Styles apply to the area between the root and the limit.

@scope ( .lotgrafix-card ) to ( .lotgrafix-card-footer ) {
    a {
        text-decoration: underline;
    }
}

The :scope selector

Inside the block, :scope refers to the scope root itself.

@scope ( .lotgrafix-card ) {
    :scope {
        border: 1px solid #ddd;
        padding: 20px;
    }
}

Why it helps

• Scoped rules win over general rules when the element is closer to the scope root, a behavior called proximity.
• It prevents plugin and theme styles from leaking into your component, and the other way around.
• It keeps selectors short and readable.

Support note

@scope is available in all modern browsers, but users on older browsers will not get the styles. Keep important layout rules outside of it if you must support older versions.