CSS, JavaScript and XHTML Explained

Double colon notation: :before versus ::before May 8, 2007

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)
• Safari

Browsers that say WTF:

• IE7 (Windows)
• IE6 (Windows)
• Netscape 7.1 (Mac)

See my other post CSS Selectors and Browser Support.