[csswg-drafts] Add ::top-layer pseudo element (#10963)

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

== Add ::top-layer pseudo element ==
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-layer
>
> With this, it would also be possible to target the top-most element or even the top-most dialog, [as detailed here](https://github.com/w3c/csswg-drafts/issues/7258#issuecomment-1164735251).
> 
> ```css
> :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.
> 
> <cite>Bramus, [#7319](https://github.com/w3c/csswg-drafts/issues/7319#issuecomment-1168531437)</cite>

I've created a codepen that demonstrates a use case for being able select the top-most `<dialog />` and prevent 'stacking' of multiple `::backdrop`s:

https://codepen.io/rejh/pen/LYKPvNr

Thank you!


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


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

Received on Friday, 27 September 2024 14:14:00 UTC