jinglesthula jinglesthula - 5 months ago 18
CSS Question

Should I use single or double colon notation for pseudo-elements?

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

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 totally pointless. Just stick with the one-colon notation.

Comments