- From: joe Jankowiak via GitHub <sysbot+gh@w3.org>
- Date: Fri, 31 Jan 2025 03:55:24 +0000
- To: public-css-archive@w3.org
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