Question

I have seen CSS like Custom Scrollbars in WebKit

body::-webkit-scrollbar {
    width: 10px;
    height: 13px;
    background-color: white;
    color: #EBEBEB;
    border:none;
}

This specifies CSS for WebKit browsers. But what does this operator (::) mean in CSS?

Where can I find other such operators in CSS?

Answer 1

It indicates that what follows is a “pseudo-element”. From the CSS Selectors level 3 spec:

A pseudo-element is made of two colons (::) followed by the name of
the pseudo-element.

And a pseudo-element creates an “abstraction about the document tree”:

Pseudo-elements create abstractions about the document tree beyond
those specified by the document language. For instance, document
languages do not offer mechanisms to access the first letter or first
line of an element’s content. Pseudo-elements allow authors to refer
to this otherwise inaccessible information. Pseudo-elements may also
provide authors a way to refer to content that does not exist in the
source document (e.g., the ::before and ::after pseudo-elements give
access to generated content).

For example, the ::webkit-scrollbar pseudo-element provides a mechanism to refer to the webkit scrollbar, which would be otherwise inaccessible. Another example: the ::first-letter pseudo-element provides a way to refer to the first letter of an element (if it is not preceded by any other content).