Question

Since IE7 and IE8 don’t support the double-colon notation for pseudo-elements (e.g. ::after or ::first-letter), and since modern browsers support the single-colon notation (e.g. :after) for backwards compatibility, should I use solely the single-colon notation and when IE8’s market share drops to a negligible level go back and find/replace in my code base? Or should I include both:

.foo:after,
.foo::after { /*styles*/ }

Using double alone seems silly if I care about IE8 users (the poor dears).

Answer 1

Do not use both combined with a comma. A CSS 2.1 compliant (not CSS3 capable) user agent will ignore the whole rule:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.

http://www.w3.org/TR/CSS2/syndata.html#rule-sets

You could however use

.foo:after { /*styles*/ }
.foo::after { /*styles*/ }

On the other hand this is more verbose than necessary; for now, you can stick with the one-colon notation.