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-e

Answer 1

You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.

#myDivId::-webkit-scrollbar {
    width: 12px;
}

#myDivId::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

#myDivId::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

http://jsfiddle.net/QcqBM/516/

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/

Answer 3

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/