Re: [csswg-drafts] [css-nesting-2] Syntax to customize how a nest-containing selector is resolved? (#6330)

Agreed. But if I’m not mistaken this is a general problem and not limited to nesting. The following example has the same problem:
```css
.foo:focus p { color: red; }
```
But there are ways to solve that:
```css
.foo:has(> .bar):focus p { color: red; }
```
If this is unsatisfactory the upcoming `@scope` donut selector could help to set a lower boundary for `.foo`. In any case, this should be a separate issue (if at all).

Coming back to the original issue, as the CSS nesting spec resolves `&` differently from current preprocessors, the initial example is as simple as that:

```css
.component {
  color: green;
  
  .container {
    color: brown;
  }
  
  .child {
    color: blue;
    
    &:hover {
      color: yellow;
    }
    
    .component:focus & {
      color: red;
    }
    
    .container.active & {
      color: white;
    }
  }
}
```

Hence this issue is good to close (imho).


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


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

Received on Wednesday, 22 February 2023 08:33:53 UTC