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

Can you clarify with comments in your source CSS which selector each `&` would become?

To me it is not fully clear what "selecting grandparent" means.
As I currently interpret it :

```pcss
.grandparent {
  & .parent { /* "&" references ".grandparent" */
    & .child { /* "&" references ".grandparent .parent" */
      color: red;
    }
  }
}
```

Only set a style on `.child` if `.grandparent` matches `:hover`.

```pcss
.grandparent {
  & .parent { /* "&" references ".grandparent" */
    @nest .grandparent:hover & .child { /* "&" references ".grandparent .parent" */
      color: red;
    }
  }
}
```

But then a new addition to the spec to write this without needing to add `.grandparent`.

Taking the first example from #6330 :

```pcss
.grandparent {
  & .parent { /* "&" references ".grandparent" */
    /* "&1" references ".grandparent" */
    /* "&" references ".grandparent .parent" */
    @nest &1:hover & .child { 
      color: red;
    }
  }
}
```

This final example would be equivalent to :

`.grandparent:hover :is(.grandparent .parent) .child`

Which matches this html 

```html
<div class="grandparent">
  <!-- possible with extra html elements in between -->
  <div class="parent">
    <!-- possible with extra html elements in between -->
    <div class="child"></div>
  </div>
</div>
```

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


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

Received on Sunday, 23 January 2022 09:31:39 UTC