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

@lubomirblazekcz please enlighten to me (css noob) why your proposal would work?

Why does this:
```css
.a {
  & .b {
    @nest :not(.c)& {
      color: red
    }
  }
}
```
become:
```css
.a:not(.c) .b {
    color: red
 }
```
and not:
```css
:not(.c).a .b {
    color: red
 }
```

Is it because the second example is not valid css? Does the & behave differently based on whether or not the css is valid? What if I do this:
```css
.a {
  & .b {
    @nest .fail& {
      color: red
    }
  }
}
```
does that become:
```css
.a.fail .b {
    color: red
 }
```
or (what I'd expect):
```css
.fail.a .b {
    color: red
 }
```

If it becomes `.fail.a .b` in the second example but `:not(.c).a .b` in the first example, is that then a property of pseudo selectors to modify how & works?

Also weirdly in my mind I'd expect if `:not(.c)&` was to be appended to anything in a selector with multiple parts, i'd naively expect it to be appended to every part, not arbitrarily the first one (like so: `.a:not(.c) .b:not(.c)`). Reminder that I'm a css noob.

As I said before, I'm not a fan of & working differently in different scenarios, but since you also seem happy with the `&<something>` syntax I think you already understand where I'm coming from.

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


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

Received on Tuesday, 1 February 2022 08:25:32 UTC