Double colon notation: :before versus ::before

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:

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

See my other post CSS Selectors and Browser Support.

Note: Updated 3.19.09

This entry was posted in CSS (including hacks), Web Development. Bookmark the permalink.

2 Responses to Double colon notation: :before versus ::before

  1. Tom says:

    If the “::” is a WTF to IE6 and 7 along with the now defunct Netscape, since that covers a very major area of users, then I would consider there to be very little if any sense in using it unless your audience is very, very specific and known to you.
    Personally I would refuse to author anything where I’d basically have to write two entire web sites, one with and one without, just to use a “neat” (not!) feature.

    Just my 2 ¢, but that’s my opinion. Ymmv but I can’t see it varying much.

  2. estellevw says:

    The point of the post was to explain what double-colon-notation is, since it’s in the WC3 specifications, but nothing was posted about it online.

    While I agree it makes no sense to use it yet, since IE has in the past failed to support CSS3 specifications. That doesn’t mean that they won’t, in the future, support CSS3. It doesn’t look that way, though. As you’ll notice in the graph of CSS3 support, IE8, at least the beta version, is actually going backward in terms of CSS support: http://www.evotech.net/blog/2008/05/browser-css-selector-support/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>