Limiting the application of selectors with @scope

A fairly recent addition, and not yet widely supported feature of CSS, is the ability to isolate the application of selectors based on a range in the DOM, and do so with less specificity. We do this with the @scope at-rule.

Just like all the other at-rules in CSS, it is a way to wrap a bunch of rules to apply them only in certain circumstances.

Practically, I think of @scope as a means to select the same things but with less specificity. I’ll explain the specificity side of things momentarily. First, let’s consider how to use scope with an example. Consider this DOM structure, which can be found in example_06-11.

<section class="rwd-Chapters">
    <h2>
        Talking about the
        <code>@scope</code>
        at-rule
    </h2>
    <ol>
        <li>
            <p>
                The
                <code>@scope</code>
             ...