- From: Bramus! via GitHub <sysbot+gh@w3.org>
- Date: Wed, 11 Jan 2023 22:53:30 +0000
- To: public-css-archive@w3.org
I think this can be solved by this selector:
```css
.upper ~ :has(~ .lower) {
outline: 1px solid red;
}
```
Demo: https://codepen.io/bramus/pen/WNKjZge
The only scenario where this selector fails is when you have two adjacent sets of boundaries, where it now acts greedy: all `<li>`s between the first `.upper` and last `.lower` will be targeted, instead of two separate groups.
```html
<ul>
<li>outside</li>
<li class="upper">upper</li>
<li>inside</li>
<li>inside</li>
<li class="lower">lower</li>
<li>outside</li>
<li>outside</li>
<li class="upper">upper</li>
<li>inside</li>
<li>inside</li>
<li>inside</li>
<li class="lower">lower</li>
<li>outside</li>
</ul>
```
IUC, the `~~` selector could solve this special case:
```css
.upper ~~ :has(~ .lower) {
outline: 1px solid red;
}
```
--
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8299#issuecomment-1379585089 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 11 January 2023 22:53:32 UTC