Re: [csswg-drafts] [css-nesting] selecting grandparent selector with @nest (#6977)

Re: the original comment https://github.com/w3c/csswg-drafts/issues/6977#issue-1111710018

I believe there was some confusion about how triply (and deeper) nested rules worked, seemingly based on an intuition of nesting working via string concatenation. In the OP's example

```
.a {
  color: blue;
  & .b {
    @nest :not(.c)& {
      color: red
    }
  }
}
```

`.a` is concatenated to `.b` yielding `.a .b` which is then itself  concatenated to `:not(.c)` yielding `:not(.c).a .b`. This is not how CSS Nesting works. Instead, each & matches the elements matched by the parent rule, so the selector is assembled as if with `:is()`-- `.a` is combined with `.b` yielding `:is(.a) .b`, which is then combined with `:not(.c)` as `:not(c):is(:is(.a) .b)` (which simplifies down to `:not(c):is(.a .b)`). This is well-defined in the spec.


Re @leaverou's comment https://github.com/w3c/csswg-drafts/issues/6977#issuecomment-1019463259 ; this is something we think might be worth exploring in the next level, and is currently filed as issue #6330. @leaverou and @Giffork, maybe you can copy your suggestions into #6330?

Re @romainmenke's comment https://github.com/w3c/csswg-drafts/issues/6977#issuecomment-1024157211

The spec was somewhat clarified, to make it clear that the nesting selector is defined by matching elements, not by desugaring; the :is() desugaring is just given as an example of equivalent behavior. <[https://](https://drafts.csswg.org/css-nesting-1/#nest-selector)[drafts.csswg.org](https://drafts.csswg.org/css-nesting-1/#nest-selector)[/css-nesting-1/#nest-selector](https://drafts.csswg.org/css-nesting-1/#nest-selector)>

Lastly, any comments about the custom selectors spec should be filed separately against that spec. :)

Closing out this very meandering combo issue, please re-file individual specific problems as individual, specific issues if we missed anything!

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


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

Received on Tuesday, 10 January 2023 20:42:18 UTC