- 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