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

I realized that the `:has()` selector provides a workaround for this issue without a new syntax:

```css
.container {
  .widget {
    color: blue;

    :has(.container.selected) & {
      color: red; /* Workaround for .container.selected .widget { color: red } */
    }
  }
}
```
Upcoming `@scope` might also allow to address this:
```css
.container {
  .widget {
    color: blue;

    @scope (&) {
      .container.selected :scope {
        color: red; /* Workaround for .container.selected .widget { color: red } */
      }
    }
  }
}
```
Please note that in Chrome v110 even the following works (https://codepen.io/flachware/pen/OJoMXPM):
```css
.container {
  .widget {
    color: blue;

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


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


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

Received on Monday, 20 February 2023 12:59:07 UTC