[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 element, 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. 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:

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

It would be:

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

Which plays well with nesting:

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

This would also allow for selectors like:

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

Note: According to https://github.com/w3c/csswg-drafts/issues/7463, the above won't be possible.

…which selects the outgoing-image pseudo element within a page-transition pseudo element, that doesn't also have an incoming-image. Although, for that particular case, I hope we can make something like this work:

::page-transition(id) :>> outgoing-image:only-child {
  /* … */
}

Start by reviewing the proposed :> and :>> selector examples in this issue, the shared element transitions use case, and the linked CSSWG issue 7463. Done would require an agreed specification for pseudo-element child and descendant combinators, including their interaction with nesting and :has.