27

From MDN:

The :: notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation : introduced in CSS 2.

If the notation : will always be accepted by CSS3 browsers, should I use it because it works on old and new browsers?

Or should I use both of them, : for old browsers and :: for new ones, because the notation : won't be always accepted?

Note: I think my question isn't a duplicate isn't a duplicate of Should I use single or double colon notation for pseudo-elements? because the other question asks about single vs double notation for ALL pseudo-elements; while my question is only about pseudo-elements defined in CSS2, not the new ones defined in CSS3, because I already know that with those I must use ::.

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • Do you care about old browsers, such as IE8? If so, use `:`. Otherwise use `::`. – thirtydot Jul 16 '13 at 19:15
  • 2
    possible duplicate of [Should I use single or double colon notation for pseudo-element css](http://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-element-css) – thirtydot Jul 16 '13 at 19:17
  • @thirtydot http://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-element-css asks about single vs double notation for ALL pseudo-elements. My question is only about pseudo-elements defined in CSS2, not the new ones defined in CSS3; because I already know that with those I must use `::` – Oriol Jul 16 '13 at 19:28
  • Where in the other *question* does it say anything about CSS3 pseudo-elements? :) – thirtydot Jul 16 '13 at 19:38
  • @thirtydot No, the other question asks about (all) pseudo-elements in general, because the asker thinks that the fact that single-colon notation works for backwards compatibility applies to all pseudo-elements. But my question explicitly talks only about before, after, first-line and first-letter – Oriol Jul 16 '13 at 19:42
  • And what other CSS2/CSS3 pseudo-elements do you think he could have been asking about in that question? – thirtydot Jul 16 '13 at 19:44
  • @thirtydot What I mean is that something like "*This compatibility is not allowed for the new pseudo-elements introduced in this specification [CSS3].*", which is part of an answer of the other question, has nothing to here, because the other question also asks (implicitly) about new pseudo-elements defined in CSS3 – Oriol Jul 16 '13 at 19:48
  • In all honesty I could've worded the other question better :) I was specifically wrangling a before/after issue when I posed the question and wasn't careful to word it in a more generally useful way. I think that while this question isn't an exact duplicate it does cover a subset of the other question. – jinglesthula Jul 28 '14 at 20:33

3 Answers3

26

For what it's worth, Selectors 4 now explicitly instructs1 authors to use double colons for all pseudo-elements, including CSS1 and CSS2 pseudo-elements, going forward (emphasis mine):

Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.

This means that the only appropriate use of the single-colon syntax today is if you absolutely require legacy browser support — the only browser that matters here is IE8 and older. If you don't, you should use the double-colon syntax for the sake of consistency with newer pseudo-elements which will only accept double colons. Besides, it's quite pointless to use the single-colon syntax if, for instance, you're going to apply properties that aren't supported by IE8 anyway, such as border-radius or box-shadow, to your ::before and ::after pseudo-elements.

I'd like to believe that Selectors 3 at the very least implied this in its statement that the single-colon syntax does not apply to any newer pseudo-elements, but having this sort of thing stated in black and white never hurt anybody and it's good to know that the upcoming standard does just that.

Also, there is absolutely no reason to write duplicate rules with both notations in the same stylesheet (e.g. :before, :after { ... } ::before, ::after { ... }), as no browser in existence supports the new syntax without supporting the older one.

1 I say this fully aware that it probably didn't state this yet at the time this question was asked — the May 2013 WD certainly did not.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • *Besides, it's quite pointless to use the single-colon syntax if, for instance, you're going to apply styles to your ::before and ::after pseudo-elements that aren't supported by IE8 anyway.* I suppose that that last sub-clause refers to the styles and not the pseudo-elements? The sentence is quite ambiguous: it can be read as if you mean that before/after isn't supported in IE8, which it is. – Bram Vanroy Apr 21 '15 at 07:57
  • It seems the sentence "*authors MUST always use the double-colon syntax*" was dropped at some point, but yesterday the CSSWG [resolved](https://lists.w3.org/Archives/Public/www-style/2015Sep/0111.html) to put a SHOULD recommendation. – Oriol Sep 14 '15 at 22:18
  • @Oriol: I can see why they changed that. "MUST" implies conformance - stylesheets using the legacy syntax would all fail validation for no good reason. – BoltClock Sep 15 '15 at 03:53
5

As I mentioned in this comment previously - http://css-tricks.com/html5-progress-element/#comment-533395

Short Answer – Use single colon notation :

Long Answer – There’s no real difference between :before and ::before, or between :after and ::after. But since the older browsers use a single colon notation, so using : is always a safer bet. Read this spec defined by W3C on pseudo elements which states that,

This :: notation is introduced by the current document 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.

Pankaj Parashar
  • 9,762
  • 6
  • 35
  • 48
-5

I would would go for the single : People now a days should at least have somewhat of the latest browsers installed, so you have nothing to worry about.

Brad
  • 31
  • 2