Apply webkit scrollbar style to specified element

Question

I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?

/* This works by applying style to all scroll bars in window */ ::-webkit-scrollbar {     width: 12px; }  /* This does not apply the scrollbar to anything */ div ::-webkit-scrollbar {     width: 12px; } 

In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.

See demo at http://jsfiddle.net/4xMUB/2/

Answer 2

I want to use a class selector for using a custom scrollbar.

Somehow .foo::-webkit doesn't work, but I figured out that div.foo::-webkit does work! Those ##$$*## pseudo-things....

See http://jsfiddle.net/QcqBM/16/