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

> 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.

@Griffork I think there is some confusion here :)

In general I don't think it is or should be possible to start writing a completely unrelated selector with nesting.

For example :

```pcss
.container {
 & .widget {
  @nest &1.selected {
   color: red;
  }
 } 
}
```

`@nest &1.selected` should be invalid as it doesn't contain `&`.
Logically it might resolve to `.container.selector` but it would not make sense to support this in the spec in my opinion.

You can simply write this :

```pcss
.container {
 &.selected {
  color: red;
 } 
}
```

The issue brought up here is that you might want to manipulate two parts of a selector when nesting.

example :

Only apply a color to `.widget` on `:hover` when `.container` is `.selected`.
You might want to write this in the same nesting blocks.

Works with todays spec :

```pcss
.container {
        /* base styles for .container */
 & .widget {
  /* base styles for .widget in .container */

                &:hover {
                  /* base styles for .widget:hover in .container */
                }
 }

 &.selected .widget:hover {
  color:red
 }
}
```

Or :

```pcss
.container {
        /* base styles for .container */
 & .widget {
  /* base styles for .widget in .container */

  &:hover {
   /* base styles for .widget:hover in .container */

   @nest .container.selected & {
    color:red
   }
  }
 }
}
```

But in both cases you have repetition of either `.container` or `.widget`.
Something like `@nest &<N>.selected &` would remove this repetition.

It would not change how `&` works or should be used.

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6977#issuecomment-1024006981 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 08:50:35 UTC