Re: [csswg-drafts] [css-nesting] How to resolve nested CSS with pseudo elements in the parent (#7433)

> Adding a warning to the spec would be great! Anything that is invalid in `:is` is also invalid as a nesting ancestor (ancestor of the rule, not of the matched element)

As an author, I hope we don't drop nesting inside pseudo-elements just because it's not supported in :is() today. 
There are many use cases for nesting in pseudo-elements, and there will be more as more nested pseudo-elements are added.

**Nested conditional rules**
```css
div::before {
  color: blue;

  @media (min-width: 480px) {
    color: red;
  }
}
```

**Nested user action pseudo classes **
```css
div::before {
  color: blue;

  &:hover {
    color: red;
  }
}
```

**Nested pseudo-elements**
```css
article::fist-letter {
  initial-letter: 3;

  &::prefix {
    font-size: 0.5em;
    vertical-align: top;
  }
}
```

It's not just that we are used to the existing feature. Making nesting inside pseudo-elements invalid will block many use cases, and will make it harder to teach and understand nesting. The specificity side-effects of using :is() will be surprising enough as it is.

I understand making it invalid would make the feature easier to implement through :is() at the moment. I hope we can prioritise authors over ease of implementation, and perhaps look at extending support for nested pseudo-elements in :is(). Improved syntax for selecting pseudo-element children and descendants as described in [7346](https://github.com/w3c/csswg-drafts/issues/7346) would be great too.

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


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

Received on Thursday, 20 October 2022 05:58:13 UTC