[css-view-transitions-1] CSS selector to differentiate transitions with only old or new images

[khushalsagar]

Filing a separate issue to track the use-case identified in the comment here, pasted below:

I'll note that our suggestion doesn't rely specifically on the specific mapping of class/element syntax, but that provides a good example. Whatever the selector-syntax mapping (@FremyCompany's suggestion of IDs might make more sense), the goal is just to allow compound/complex selectors in the function.

One reason for that might be exposing the hierarchy. The more important goal in my mind was the ability to differentiate what happens in these three instances:

1. There is only a new image.
2. There is only an old image.
3. There are both old and new images.

The solution mentioned a few times for that is using :only-child/:not(:only-child) on the element in question. I assume that solution is also possible with the current proposal?

html::view-transition-old(*):only-child {
  /* this is a default exit animation */
}

This could be done with html::view-transition-old(*):only-child but @jakearchibald highlighted that " it's tricky because what does ::before:only-child mean? We might need to allow-list which pseudos can use :only-child."

[jakearchibald]

I think this was resolved in #7085 (comment)

JakeA: would folks be happy with us using :only-child for view transitions?
TabAtkins: As long as it matches intent
TabAtkins: defined as up to two children, and this one says if you have only one
JakeA: But usually it doesn't count pseudos...
JakeA: but I guess if we're appying it to a pseudo
…
TabAtkins: pseudo-elements live in the tree
RESOLVED: Allow pseudo-elements to define additional pseudo-classes they allow to be placed after them.

PR at #8126

[cdoublev]

Please forgive me for this aside.

In 3.6.5 Internal structure, Selectors says:

Some pseudo-elements are defined to have internal structure.

And CSS View Transitions says:

The precise tree structure, and in particular the order of sibling pseudo-elements, is defined in the setup transition pseudo-elements algorithm.

Can I assume that all except ::view-transition-new() and ::view-transition-old() have an internal structure? I do not have a good knowledge of CSS View Transitions and it is not easy for me to answer this from reading the above mentioned algorithm.

[jakearchibald]

You don't have to assume, it's all defined in #8126 😄

(but yes, ::view-transition-new and ::view-transition-old are replaced content, so they never have children)

[khushalsagar]

Edits landed in #8126.