w3c / w3c/csswg-drafts

[css-cascade-7] Is it possible to account for proximity of sibling elements?

Open
#7,233 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-cascade-7 Needs Edits
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>
Screenshot of example HTML and CSS described above showing how the general sibling selector in CSS also does not account for element proximity.

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.