[css-cascade-6] Proposal: "until" pseudo selector

[yairEO]

Following my StackOverflow question

---

I would like to propose a pseudo-selector for selecting elements until the selector defined in the :until part is encountered.

The main purpose is a repeating selector, for confined "groups" of matched elements, between certain constraints.

Use-cases for an :until pseudo-selector:

For each div with class active select all of its following (next) <a> siblings up until the first encountered div selector (jsbin).

(the number of <a> elements is unknown)

div.active ~ a:until(div) { color: red; }

<a>❤</a>       
<a>❤</a>       
<div class='active'></div>
<a>❤</a> <!-- should match this -->
<a>❤</a> <!-- should match this -->
<div></div>
<a>❤</a>
<a>❤</a>
<div class='active'></div>
<a>❤</a> <!-- should match this -->

Currently, there is a specificity problem if one simply write the below CSS selectors:

The selectors only match the first "group" of ` elements and then the second selector overrides the first selector for the rest of the anchor elements:

div.active ~ a { color: red; }
div:not(.active) ~ a { color: initial; }

[DarkWiiPlayer]

There is already a proposal that would let you do this: #7233

div.active ~~ a { color: red; }
div:not(.active) ~~ a { color: initial; }

[Loirooriol]

Or possibly something like this (if I'm reading #7751 correctly):

@scope-siblings (div.active) to (div) {
  a { color: red; }
}

@mirisuzanne Is that right? I haven't been following this in detail.

[Loirooriol]

Going back to the specific proposal, I don't like that :until does not impose a constraint on the matching element, but on the preceding combinator. This seems more logical:

div.active ~(:not(div)) a { color: red }

So ~ is like +, + * +, + * + * +, etc. but we would restrict it to +, + :not(div) + , + :not(div) + :not(div) +, etc.

But not sure if something like this is worth it if @scope can already cover the usecases.

[mirisuzanne]

The sibling scope at-rule will work for this use-case, @bramus is working on spec text for that.

The issue with doing it as a pseudo-class (which we considered) is related to @Loirooriol's comment: the 'scope-end' element has to be defined in relation to a specific 'scope-start' element, and the selector subject has to be defined in relation to that resulting scope. That means we need to match three distinct selectors to three distinct subjects. There might be ways to do that in a pseudo-class or other selector syntax, but so far it seems clearer in an at-rule, where each of the three selectors has it's own space.

[tabatkins]

Yup, this is an @scope issue, and doing it within the Selector syntax itself is fraught.