Style containment scopes counters and quotes to the contained element. For CSS counters, the counter-increment
and counter-set
properties are scoped to the element as if the element is at the root of the document.
Containment and counters
The example below takes a look at how counters work when style containment is applied:
<ul>
<li>Item A</li>
<li>Item B</li>
<li class="container">Item C</li>
<li>Item D</li>
<li>Item E</li>
</ul>
body {
counter-reset: list-items;
}
li::before {
counter-increment: list-items;
content: counter(list-items) ": ";
}
.container {
contain: style;
}
Without containment, the counter would increment from 1 to 5 for each list item. Style containment causes the counter-increment
property to be scoped to the element's subtree and the counter begins again at 1:
Containment and quotes
CSS quotes are similarly affected in that the content
values relating to quotes are scoped to the element:
<span class="open-quote">
outer
<span style="contain: style;">
<span class="open-quote"> inner </span>
</span>
</span>
<span class="close-quote"> close </span>
<br />
<span class="open-quote">
outer
<span>
<span class="open-quote"> inner </span>
</span>
</span>
<span class="close-quote"> close </span>
body {
quotes: "[" "]" "‹" "›";
}
.open-quote:before {
content: open-quote;
}
.close-quote:after {
content: close-quote;
}
Because of containment, the first closing quote ignores the inner span and uses the outer span's closing quote instead: