Understanding double-colon notation:
The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So,
:after is a pseudo-class and
::after is a pseudo-element.
This :: notation (double colon notation) was introduced by the W3 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 CSS level 3.” For more information, visit W3.
Browser Support for double-colon notation
Browsers that understand it:
- Firefox 1.5
- Firefox 2.0.X (Mac and Windows)
- Opera (Mac and Windows)
Browsers that say WTF:
- IE8 (Windows)
- IE7 (Windows)
- IE6 (Windows)
- Netscape 7.1 (Mac)
See my other post CSS Selectors and Browser Support.
Note: Updated 3.19.09