Description
This is a continuation of #7319.
I request that a ::top-layer pseudo element is added. As Bramus proposed:
What if we had a top-layer pseudo element, i.e. ::top-layer? It would be a pseudo-element that’s only available on the html element.
You wouldn’t use it (or be able) to style the top-layer itself, but could use it to target elements that are inside the top-layer by use of a combinator, e.g.
::top-layer *= All elements that appear in the top-layer
::top-layer dialog= Only dialog elements that appear in the top-layerWith this, it would also be possible to target the top-most element or even the top-most dialog, as detailed here.
:nth-last-child(1 of ::top-layer dialog) { /* topmost modal dialog in the top-layer, yay! */ }This would require for ::top-layer to report its (virtual) children in the order in which they got added, though. This is info which I suppose is internally already available, because otherwise top-layer wouldn’t be able to stack it’s contents properly.
Bramus, #7319
I've created a codepen that demonstrates a use case for being able select the top-most <dialog /> and prevent 'stacking' of multiple ::backdrops:
https://codepen.io/rejh/pen/LYKPvNr
Thank you!
Edit: CC @bramus