[csswg-drafts] [css-selectors] Proposal: `>>` combinator to ensure all elements between an ancestor and a descendant match a given selector (#11309)

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

== [css-selectors] Proposal: `>>` combinator to ensure all elements between an ancestor and a descendant match a given selector ==
I've needed something like this a few times, and I just thought of a way to express it.

Here's an example:

```html
<div class="group">
  <div> <!-- any number of element layers here -->
    <div class="yellow-bg-on-nearest-group-hover">
      This element should have a yellow background when the root `.group` is hovered, because it's
      the nearest one to this element.
    </div>
  </div>
  <div class="group">
    <div> <!-- any number of element layers here -->
      <div class="yellow-bg-on-nearest-group-hover">
        This element should have a yellow background only when the nearest `.group` is hovered,
        but not when other elements in the root `.group` are.
      </div>
    </div>
  </div>
</div>
```

Here's how I'm picturing it:

```css
.group:hover > .yellow-bg-on-nearest-group-hover,
.group:hover > :not(.group) >> .yellow-bg-on-nearest-group-hover {
  background-color: yellow;
}
```

That would be equivalent to something like this, but with an infinite number of `> :not(.group) >`:

```css
.group:hover > .yellow-bg-on-nearest-group-hover,
.group:hover > :not(.group) > .yellow-bg-on-nearest-group-hover, 
.group:hover > :not(.group) > :not(.group) > .yellow-bg-on-nearest-group-hover
.group:hover > :not(.group) > :not(.group) > :not(.group) > .yellow-bg-on-nearest-group-hover /* etc. */ {
  background-color: yellow;
}
```

It would basically repeat the selector that precedes `>>` an infinite number of times.

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


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

Received on Monday, 2 December 2024 03:37:09 UTC