- From: Johannes Odland via GitHub <sysbot+gh@w3.org>
- Date: Fri, 04 Aug 2023 05:50:42 +0000
- To: public-css-archive@w3.org
I think this is according to the spec.
When properties are used directly in nested at-rules, they act as if they were nested in a `& { ... }` block. ([#conditionals](https://www.w3.org/TR/css-nesting-1/#conditionals)) However, the `&` nesting selector cannot represent pseudo-elements. ([#nest-selector](https://www.w3.org/TR/css-nesting-1/#nest-selector))
As a result, the rule nested in the media query will be invalid:
```css
::before {
background: red;
@media (width < 50rem) {
background: blue;
}
}
/* equivalent to
::before {
background: red;
@media (width < 50rem) {
& {
background: blue;
}
}
}
*/
```
I agree this can be confusing to authors, but as [Issue 2](https://www.w3.org/TR/css-nesting-1/#issue-62c479a8) the spec say:
> We’d like to relax this restriction, but need to do so simultaneously for both [:is()](https://www.w3.org/TR/selectors-4/#matches-pseudo) and [&](https://www.w3.org/TR/css-nesting-1/#selectordef-), since they’re intentionally built on the same underlying mechanisms. ([Issue 7433](https://github.com/w3c/csswg-drafts/issues/7433))
--
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9153#issuecomment-1665048795 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 4 August 2023 05:50:44 UTC