What does the double colon (::) mean in CSS?

Question

What does the double colon (::) mean in CSS?

For example:

input[type=text]::-ms-clear { display: none; }

Answer 1

It means pseudo element selector. It means the element to the right doesn't exist in the normal DOM, but can be selected.

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

Source

It was originally only a single colon, but was changed to differentiate it from pseudo classes (like :hover, :first-child, :not etc). It's best to use : for before and after pseudo elements since the single colon has better browser support, namely in earlier IE versions.

Answer 2

The :: operator indicates you are selecting a pseudo element, one which does not actually exist as an element but can still be targeted for styling.

Example of this include several vendor-specific implementations such as the -ms-clear sample you provide, most browsers also have pseudo elements to style scroll bars and other native UI elements, but there are also a lot of predefined pseudo elements which can be referenced for practical reasons, such as first-line and first-letter.

The :before and :after pseudo elements even allow you to insert actual content into the page using CSS with the content rule.

Answer 3

CSS3 changes the way pseudo-elements are selected, as the W3C wanted to distinguish pseudo-classes like a:visited from pseudo-elements like p::first-line. See Advanced CSS Selectors.