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

> Instead, I think we should go for a simpler solution, with predefined names for going up 1, 2, 3, ... levels. Perhaps `&1`, `&2`, `&3` etc. Then the example above would become:
> 
> ```css
> .container {
>  & .widget {
>   @nest &1.selected & {
>    /* Gets rewritten to .container.selected .widget */
>   }
>  } 
> }
> ```
> 
> Is `&1` cryptic? Yes. But it isn't more cryptic than `&` itself, and it kinda reminds me of `$1`, `$2` etc in JS string replacement.

Personally if you're going to go the &1, &2, &3 route I'd argue that & should be all of them and &0 should be the last child selector, so 

```css
 .container {
  & .widget {
  @nest &1.selected &0 {
/* Gets rewritten to .container.selected .widget */
```
```css
 .container {
  & .widget {
  @nest &.selected {
/* Gets rewritten to .container .widget.selected */
```

The `&` referring to the whole of the parent selector is the most common use-case, users shouldn't have to write long chains of & that match exactly how many nested selectors  there are just to add another selector on the end, instead use &0 to get the last selector without the previous.

Because forcing this is a recipe for disaster:

```css
.container {
    &0 .widget {
         &0 &1.selected {
              &0 &1&2:hover {
/* Becomes .container .widget.selected:hover */
```

Particularly if you have to remember which ones have spaces and which ones don't.

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


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

Received on Friday, 28 January 2022 04:54:09 UTC