Re: [csswg-drafts] [css-nesting-1] Clarify when nested rules are equivalents to `:is()` (#10523)

The `&` selector is _always equivalent_ to using `:is()` - they use the same mechanism. In some cases, both `&` and `:is()` are _also_ equivalent to a bare selector. Generally, for example, `:is(article)` and `article` are equivalent selectors. They are not the same selector, but they select the same thing at the same specificity. They are all three equivalent in this case:

```css
article { & { color: red; } }
:is(article) { color: red; }
article { color: red; }
```

In Sass, the `&` is literally replaced by another selector, which can result in concatenation. But in CSS, `&` _is the selector_ – just like `article` is a selector. So `&&` doesn't _become_ something else, it remains `&&` (a valid selector). But the result of that valid selector (in your example) is _equivalent to_ `:is(article):is(article)`, and not `articlearticle`.

The spec examples are not showing literal transformations that happen to your selector, they are showing alternative selectors that have equivalent results.

- You will always get an equivalent result by replacing `&` with `:is()`, because both selectors use the same underlying mechanism
- You will _sometimes also_ get an equivalent result by replacing `&` with a bare selector, because sometimes `:is(<selector>)` will behave the same as `<selector>` on its own

Does that make sense?

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


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

Received on Sunday, 7 July 2024 17:43:49 UTC