Re: [csswg-drafts] [css-nesting] :selector-replace() pseudo-class function (#6330)

@Loirooriol @LeaVerou I realize that if my claim that the nesting spec is incomplete holds true, then the conlusion must be to focus on the existing `@nest &` syntax and add more capabilities right there. Logically, there are three ways the nesting selector can change: A selector is prepended, appended, or inserted. So in addition to being able to append a selector to the nesting selector with `@nest &:hover` and prepend a selector with `@nest :hover &` merely by changing the order, I propose a way to append a selector to an ancestor within the the nesting selector using a `&()` modifier. 

```css
.foo {
  & .bar {
    & .baz {
      &:hover {
        /* => .foo .bar .baz:hover */
      }
      
      @nest :hover & {
        /* => :hover .foo .bar .baz */
      }

      &(.foo:hover) {
        /* => .foo:hover .bar .baz */
      }
    }
  }
}
```
`&(.foo:hover)` would be processed from left to right, so the first selector `.foo` in the modifier would be used to find any ancestor in the nesting with that class name and then append `:focus`.

I believe that appending a selector to an ancestor is equally important as prepending a selector to the nesting selector and thus the burden to work around this situation should not be passed onto the users of CSS. Instead, there has to be a way that allows users to append selectors to ancestors right in place. Without a syntax that facilitates this users have to recreate slightly modified nestings various times – which contradicts the whole point of nesting as an approach to avoid redundancy. 

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


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

Received on Thursday, 3 June 2021 06:56:47 UTC