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

Question

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

For example:

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

Answer 1

This means a pseudo-element selector. This means that the element on the right does not exist in the regular DOM, but can be selected.

The pseudo-element consists of two colons (: :), followed by the name of the pseudo-element.

Source

Initially, it was only one colon, but was modified to distinguish it from pseudo classes (for example :hover :first-child :not , etc.). It is better to use : for before and after pseudo-elements, since a single colon has better browser support, namely in earlier versions of IE.

Answer 2

The :: operator indicates that you select a pseudo-element that does not actually exist as an element, but can still be aimed at styling.

An example of this includes several vendor-specific implementations, such as the -ms-clear example that you provide, most browsers also have pseudo-elements for scrollbar styles and other native user interface elements, but there are also many predefined pseudo-elements that can be specified by practical considerations like first-line and first-letter .

The :before and :after pseudo-elements even allow you to embed actual content on a page using CSS using the content rule.

Answer 3

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