Apply webkit scrollbar style to specified element

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/

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/

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/

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/

You can have a scss file and apply the style to a class there

style.scss

.myscrollbar {
  ::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
  }
  ::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: inset 7px 10px 12px #f0f0f0;
  }
}

home.html

<div class="myscrollbar">
put your contents here
</div>

I used the scrollbar generator here: https://w3generator.com/scrollbar