[css-cascade-7] Is it possible to account for proximity of sibling elements? #7233
Description
https://www.w3.org/TR/2021/WD-css-cascade-6-20211221/#scoped-styles
Scoping limits can use the :scope pseudo-class to require a specific relationship to the scoping root:
/* .content is only a limit when it is a direct child of the :scope */ @scope (.media-object) to (:scope > .content) { ... }Scoping limits can also reference elements outside their scoping root by using :scope. For example:
/* .content is only a limit when the :scope is inside .sidebar */ @scope (.media-object) to (.sidebar :scope .content) { ... }
The scoping proposal is mostly focussed on component based styling.
I think the weak scoping proximity feature that is part of the scoping proposal would also be useful for sibling selectors. I was not sure if this was also covered by the current specification.
Example 3 seems to allow room for a scope with this definition :
@scope (.media-object) to (:scope ~ .text-object) { ... }Example :
Styling any paragraph elements that follow a certain heading element.
h1 ~ p {
color: red;
}
h2 ~ p {
color: green;
}
h3 ~ p {
color: blue;
}<h1>Main heading (h1)</h1>
<p>Red text</p>
<h2>Sub heading (h2)</h2>
<p>Green text</p>
<p>Green text</p>
<h3>Smaller heading (h3)</h3>
<p>Blue text</p>
<p>Blue text</p>
<h2>Sub heading (h2)</h2>
<p>Blue text, but intended green</p>
<p>Blue text, but intended green</p>
Maybe we can write this CSS :
@scope (h1) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
p {
color: red;
}
}
@scope (h2) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
p {
color: green;
}
}
@scope (h3) to (:scope ~ :is(h1, h2, h3, h4, h5, h6)) {
p {
color: blue;
}
}