Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?

by

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.

More Related Contents:

  1. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  2. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  3. What is the difference between a pseudo-class and a pseudo-element in CSS?
  4. Can I target a :before or :after pseudo-element with a sibling combinator?
  5. Should I use single or double colon notation for pseudo-elements?
  6. Universal selector * and pseudo elements
  7. Can I have multiple :before pseudo-elements for the same element?
  8. Combine :after with :hover
  9. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  10. Vertically centering content of :before/:after pseudo-elements
  11. What is the difference between pseudo-classes and pseudo-elements?
  12. Combine CSS Attribute and Pseudo-Element Selectors?
  13. Is there a CSS selector for elements containing certain text?
  14. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  15. ::slotted CSS selector for nested children in shadowDOM slot
  16. Nesting CSS classes
  17. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  18. Font Awesome 5, why is CSS content not showing?
  19. What is the difference between ‘>’ and a space in CSS selectors?
  20. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  21. What is this CSS selector? [class*=”span”]
  22. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  23. Is there such a thing as an “all inclusive sibling” CSS selector?
  24. CSS selector involving pseudo class first-child and dropcap
  25. CSS select multiple descendants of another element
  26. Select all ‘tr’ except the first one
  27. CSS – First child without certain class
  28. Correct terms and words for sections and parts of selectors
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment