How to use CSS combinators with webkit?

Question

I'm trying to change vertical scrollbar thumb color on hovering the track part/piece.

The track is black and the thumb is green, I want to swap it when track is hovered.

See what I got:

html {
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background-color: #0B1B22;  
}
::-webkit-scrollbar-thumb {
    background: #04ff00;
} 
::-webkit-scrollbar-track:vertical:hover {
    background-color: #04ff00;  
}
::-webkit-scrollbar-track:vertical:hover + ::-webkit-scrollbar-thumb {
    background-color: #0B1B22;
}

<body onLoad="window.scroll(0, 150)">
    lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>lorem<br>
</body>

I couldn't find online how scrollbar shadow elements are ordered.. For example, `::-webkit-scrollbar *` and `::-webkit-scrollbar + *`don't seem to match anything. — Matheus Avellar, Mar 01 '17 at 02:06
That is, there isn't a sibling relation between `-track` and `-thumb`, so that's why that last CSS rule doesn't work — Matheus Avellar, Mar 01 '17 at 02:07
That's the million dollar question. I'll keep trying to come up with a solution, but I can't promise you anything :\ What you _can_ do is change the background color on `::-webkit-scrollbar-thumb:hover { ... }`, but I can see why that's flawed — Matheus Avellar, Mar 01 '17 at 03:07
[This user](http://stackoverflow.com/questions/22975615/coloring-webkit-scrollbar-track-on-hover) had a similar question, but no success. I did find [this JSFiddle](http://stackoverflow.com/questions/22975615/coloring-webkit-scrollbar-track-on-hover) which uses jQuery to solve the problem (hovering on the track changes the thumb color) — Matheus Avellar, Mar 01 '17 at 03:22
Possible duplicate of [Can I target a :before or :after pseudo-element with a sibling combinator?](http://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) - the same principle applies to any pseudo-element. — BoltClock, Mar 01 '17 at 03:23
@Matheus Avellar: It's not that there isn't a sibling relation between those two pseudo-elements - there might well be, I don't know - but that you can't represent a relation between two pseudo-elements using combinators. — BoltClock, Mar 01 '17 at 03:25
@BoltClock I see. I've never come across this need before so I had no clue. Thanks for the clarification! — Matheus Avellar, Mar 01 '17 at 03:25
Possible duplicate of [Can I target a :before or :after pseudo-element with a sibling combinator?](http://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) — TylerH, Mar 03 '17 at 17:23

How to use CSS combinators with webkit?

0 Answers0