[csswg-drafts] [css-view-transitions-1] Can we make the `::view-transition-old` and `::view-transition-new` pseudos “:has-allowed pseudo-element”s? (#12630)

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

== [css-view-transitions-1] Can we make the `::view-transition-old` and `::view-transition-new` pseudos “:has-allowed pseudo-element”s? ==
In https://cydstumpel.nl/being-lazy-with-view-transition-old-and-new/, the author @cydstumpel wants to style the `::view-transition-group` conditionally based on whether it has _only_ a `::view-transition-old` or _only_ a `::view-transition-new`. 

> When going from an overview with speakers to a detail page for example, only the speaker that is clicked will have an old and a new state, the other speakers will only have an old state. When going from a detail page back to an overview only the speaker that was active will have both states. It would be even more useful if the `:has` selector would work on pseudo elements because then we could also adjust the stacking order of the parent group to make sure it is in front of all the other elements.

The CSS they want to use is the following:

```css
::view-transition-group(.item):has(::view-transition-old(.item):only-child) {
  …
}
```

This seems like a valid use-case but currently doesn’t work, because `:has` does not accept pseudo-elements unless those pseudo-elements are defined as [:has-allowed pseudo-element](https://drafts.csswg.org/selectors/#has-allowed-pseudo-element).

I believe we can safely make those two pseudos :has-allowed pseudo-element because their continued existence isn’t affected by any other CSS properties.

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


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

Received on Wednesday, 20 August 2025 13:46:19 UTC