[selectors] Child & descendant pseudo element combinators (original) (raw)

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 #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 { /* … */ }