What does the double colon (::) mean in CSS?
CssCss Problem Overview
What does the double colon (::) mean in CSS?
For example:
input[type=text]::-ms-clear { display: none; }
Css Solutions
Solution 1 - Css
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.
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.
Solution 2 - Css
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.
Solution 3 - Css
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.