26

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?

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Jeevan
  • 3,878
  • 6
  • 29
  • 37
  • 1
    [double colon notation](http://www.impressivewebs.com/before-after-css3/) – T I Jul 06 '12 at 09:44
  • CSS does not have a notion of "operators" in selectors - it just happens to use certain special characters to denote different kinds of selectors. For example, `.` represents a class, `#` an ID, `+` for next sibling and `>` for child. – BoltClock Jul 06 '12 at 09:53

6 Answers6

17

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).

James Allardice
  • 164,175
  • 21
  • 332
  • 312
17

In css3 we use double colon(::) for pseudo-element & single colon(:) for pseudo-class

The single colon syntax (e.g. “:before” or “:first-child”) is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements (yes, they’re different), in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.

Read this article http://www.impressivewebs.com/before-after-css3/

sandeep
  • 91,313
  • 23
  • 137
  • 155
8

It is used to define a pseudo-element. As an example from the documentation:

p::first-line { text-transform: uppercase }

This modifies the first line of p elements. There's no real DOM element that is selected, that is why it is a pseudo-element.

In your case, it modifies scrollbars in WebKit within the body element:

body::-webkit-scrollbar

There is no scrollbar element within your document but this still allows you to style scrollbars within your HTML page.

Simeon Visser
  • 118,920
  • 18
  • 185
  • 180
2

this operator is new add in CSS3.it's meaning Pseudo element.

Blade Master
  • 157
  • 6
2

Thought I'd add this since people are having difficulty understanding what it actually means:

Basically it's a way to get a document to format in a way that wouldn't be possible using the markup that is present. A good example exists in the W3 spec:

Here is the example for a ::first-letter pseudo element

The original HTML fragment

<div>
<p>The first text.

The fictional markup after the pseudo element is applied

<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.

As you can see - the original HTML specified a div and a p, but there is no way to format the first letter using standard CSS, so the pseudo elements were added, enabling the first letter to be modified

Psuedo elements allow you to do stuff like that..

Charleh
  • 13,749
  • 3
  • 37
  • 57
  • 1
    I found this to be the best answer because you demonstrated the syntax, broke down the steps, and explained what was happening. The "best answers" above this look copied verbatim from Google. I dislike when experts do that because manuals and advanced functionality often don't make much sense without a concise demonstration of syntax and/or a broken down step by step visual explanation. I just wanted to thank you for taking the time to see that a lot of us were struggling and taking the time to clarify! More should follow your example because we are learning and appreciate the guidance! – AntonioTorro Oct 27 '21 at 23:34
2

Google is your friend here.

Pseudo-elements

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).

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

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Found at http://www.w3.org/TR/css3-selectors

Community
  • 1
  • 1
BungeeCraft Technologies
  • 71
  • 3