[csswg-drafts] Proposal: "until" pseudo selector (#8815)

yairEO has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal: "until" pseudo selector ==
Following my [StackOverflow question](https://stackoverflow.com/q/76193251/104380)

---

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

`:until` selector corresponds to anything which next siblings match "up to" a certain point, and no more.

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` element with class `active` select all of its following (next) `<a>` siblings up until the first encountered `div` selector ([jsbin](https://jsbin.com/meleqal/3/edit?html,css,output)), <br> where the number of `<a>` elements is unknown.

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

```html
<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 <a>` elements and then the second selector overrides the first selector for the rest of the *anchor* elements:

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

![image](https://user-images.githubusercontent.com/845031/236690761-7e5cb62c-a2fe-4447-8b31-ed37d1f18360.png)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8815 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 7 May 2023 16:46:22 UTC