Re: [csswg-drafts] [selectors] Add `:top-layer` pseudo class (#7319)

Flipping things around: 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.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7319#issuecomment-1168531437 using your GitHub account


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

Received on Tuesday, 28 June 2022 10:20:29 UTC