[csswg-drafts] [css-nesting] ::part():hover nested ::part() { &:hover } don't function the same? (#11626)

joezappie has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] ::part():hover nested ::part() { &:hover } don't function the same? ==
My understanding is that these two should be technically identical to each other except the nested hover does not seem to work in any browser.

```
test-button::part(button) {
  &:hover {
    background: blue;
  }
}

test-button::part(button):hover {
  background: blue;
}
```

Here is a jsfiddle with an example: https://jsfiddle.net/5oczux7d/ 
If you remove the last `test-button::part(button):hover` rule it will no longer change to blue.

### Reason for wanting this to work
I'm using tailwind to generate an interactive-bg-surface class which uses nested :hover states:
```
@utility interactive-bg-* {
  background-color: --value(--color- *);

  &:hover {
    background-color: color-mix(in oklch, --value(--color- *), --value(--color-on- *) 8%);
  }
}
```

Which I then apply to my custom element part:
```
zy-table::part(row) {
  @apply interactive-bg-surface-container;
}
```

But since the nested `:hover` state doesn't work, I have to instead generate the focus bg colors and make a separate rule for it.
```
zy-table::part(row):hover {
  @apply hover-bg-surface-container;
}
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11626 using your GitHub account


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

Received on Friday, 31 January 2025 03:55:25 UTC