[csswg-drafts] Can't target ::scroll-button with :has() (#13258)

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

== Can't target ::scroll-button with :has() ==
I am attempting to build a CSS carousel using some of the new functionality. However I've run into a bug or  limitation with the spec that prevents me from using it.

I have an SVG arrow icon I want to use as the next/prev buttons in the carousel.

```
<svg class="arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path class="cap" d="M14 10L8 16L14 22"></path>
<path class="stem" d="M8 16H24"></path>
</svg>
```

On hover, I use CSS to animate it:

<img width="120" height="103" alt="Image" src="https://github.com/user-attachments/assets/f12d197a-16e4-4099-8d0e-372717db080f" />
<img width="107" height="92" alt="Image" src="https://github.com/user-attachments/assets/adb9dc91-957e-4c00-89e4-9558731adacf" />

What I tried to do was overlay the `::scroll-button` over these SVGs, give it some content for accessibility like "Previous/Next", and make it transparent. So the user is only clicking/hovering on the `::scroll-button`. My SVG underneath will have `pointer-events: none;` or something.

Here's where it breaks. I try to check if the user is hovering on the `::scroll-button`, and if they are, I apply my CSS transforms:

```
my-carousel:has(::scroll-button(inline-end):hover){

.stem {
transform: scaleX(1.5) translateX(-5px);
}

.cap {
 transform: translateX(-6px);
}

}
 ```

Nothing happens. In fact, I can't even force the hover state in Chrome devtools to debug why it's not working.

<img width="302" height="264" alt="Image" src="https://github.com/user-attachments/assets/09c3acc3-67f2-4b47-a295-062dff994a63" />

I don't want to be limited to whatever will go inside the ::scroll-button `content` prop and AFAIK I can't append my inline SVG into it either (am I wrong?). I can't use an external SVG image AFAIK either (I need to style it with CSS and it wouldn't animate). 

Totally get if `:has()` is the wrong way to do this... but if there's no way for me to bring my own inline SVGs to the new CSS carousels that's a pretty limited use case. Even the examples at https://chrome.dev/carousel/ appear to be using an icon font or something for the arrows. 




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


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

Received on Sunday, 21 December 2025 16:50:23 UTC