[csswg-drafts] [selectors] Child & descendant pseudo element combinators (#7346)

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

== [selectors] Child & descendant pseudo element combinators ==
Right now, `div::before::marker` means: Select the `::marker` pseudo elements, that are a child of a `::before` pseudo elements, that originate from a `div`.

There isn't a way to say: Select the `::marker` pseudo elements, that originate somewhere within the pseudo element tree of a `div`.

It'd be great if we had a way to achieve this, such as:

- `:>` - select child pseudo elements. As in, `div :> before :> marker` would be equivalent to `div::before::marker`
- `:>>` - select descendant pseudo elements. As in, `div :>> marker` would enable the use-case above.

Future additions could include other combinators prefixed with `:`, such as `:+`, to target adjacent sibling pseudo elements.

---

This use-case came up in [shared element transitions](https://github.com/WICG/shared-element-transitions/). Over there, we create pseudo-trees that are more complicated than (I think) we've seen in other features:

```
html
└─ ::page-transition(id)
   └─ ::image-wrapper
      ├─ ::outgoing-image
      └─ ::incoming-image
```

Our current model is to expose these through the following selectors:

- `html::page-transition-container(id)`
- `html::page-transition-image-wrapper(id)`
- `html::page-transition-outgoing-image(id)`
- `html::page-transition-incoming-image(id)`

However, these don't really communicate the structure, and won't play well with upcoming features like nesting, or `:has`.

We'd like to expose the pseudos as they're structured, so instead of:

```css
::page-transition-outgoing-image(id) { /*…*/ }
```

It would be:

```css
::page-transition(id) :>> outgoing-image { /*…*/ }
```

Which plays well with nesting:

```css
::page-transition(id) {
  & :>> outgoing-image { /* … */ }
  & :>> incoming-image { /* … */ }
}
```

This would also allow for selectors like:

```css
::page-transition(id):not(:has(:>> incoming-image)) :>> outgoing-image {
  /* … */
}
```

…which selects the `outgoing-image` pseudo element within a `page-transition` pseudo element, that doesn't also have an `incoming-image`.

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


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

Received on Thursday, 9 June 2022 14:58:22 UTC