[csswg-drafts] [css-nesting] How to resolve nested CSS with pseudo elements in the parent (#7433)

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

== [css-nesting] How to resolve nested CSS with pseudo elements in the parent ==
first reported here : https://github.com/csstools/postcss-plugins/issues/510

relevant specification parts: 

https://www.w3.org/TR/css-nesting-1/#nest-selector

>The [nesting selector](https://www.w3.org/TR/css-nesting-1/#nesting-selector) can be desugared by replacing it with the parent style rule’s selector, wrapped in an [:is()](https://www.w3.org/TR/selectors-4/#matches-pseudo) selector. For example,

https://www.w3.org/TR/selectors-4/#matches-pseudo

>Pseudo-elements cannot be represented by the matches-any pseudo-class; they are not valid within [:is()](https://www.w3.org/TR/selectors-4/#matches-pseudo).

For this CSS :

```pcss
.anything::before {
  @nest .something_else > & {
    color: black
  }
}
```

`&` should represent the matched element of the enclosing rule. Which in this case is `before`.
As far as I know we can not express `.something_else > before` at the moment.

Is this CSS :
1. invalid
2. matches `.something_else > .anything::before`
3. matches `.something_else.anything :> before`  (borrowing `:>` as a child pseudo element combinator)

Also relevant : 

- https://github.com/w3c/csswg-drafts/issues/2284#issuecomment-364580632
- https://github.com/w3c/csswg-drafts/issues/7346#issue-1266265523

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


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

Received on Wednesday, 29 June 2022 20:18:05 UTC