[css-cascade-7] Is it possible to account for proximity of sibling elements?
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
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;
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CSS Cascade scoping-limits section and its Example 3, then compare the proposed @scope examples with the h1p, h2p, and h3~p behavior shown in the issue. Determine whether scoping proximity can express the intended sibling relationship; done means documenting the answer or reaching a specification decision.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100