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

@mirisuzanne Yes that does make sense and it is incredibly helpful. I want to make sure that I understand this behavior properly:

1. In all cases of nested selectors, the nearest "true equivalent" will be a selector that uses the `:is()` pseudo-selector
2. Both the parent *and* the nested selector(s) would be considered to be wrapped in an`:is()`  (e.g. `article { h1 {display: block}}` => `:is(article) :is(h1)`
3. the _unnested_ `&` ends up representing `*` (e.g. `& {display: block;}` => `:is(*) {display: block}`)
4. The nested `&` that doesn't have any inline selectors is a _single_ application of `:is()` where it's the _parent_ that's wrapped in an `:is()`. e.g. ( `section > article { & {display: block}}` => `:is(section > article)`
5. The nested `&` that _does have inline selectors_ is a multi-application of `:is()` because it comes from both parent and nested child. e.g. `section > article {main & {display: block}}` => `:is(main) :is(section > article) {display: block}`
 
6.  double-& is a double-chained `:is()`, but the reality is that it has nothing to do with what's nested. It's because nesting triggers children and parents to be wrapped in `:is()`, and in this case we've just chained our parent `:is()` together.  

```
article { /*:is(article):is(article) */
 && {
  display: block;
 }
}

.article {
 && { /* :is(.article):is(.article) */
   display: block;
 }
}
```

I know that the nesting behavior _superficially_ looks / acts like Sass. But what I'm really trying to understand is all the ways it _isn't like Sass_. 

Sass of course errors on a single nested `&`. It also wouldn't allow an unnested `&`, nor would it allow `&&`, all of which aren't problematic in CSS. 

Do you think it might be beneficial to explain explicitly in the documentation how nesting invokes `:is()` on both parent _and_ child, and to possibly even give an example of the unnested `&` so as to illustrate how it _also_ uses `:is()` ?



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


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

Received on Monday, 8 July 2024 20:40:34 UTC