152

Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification?

S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
Parker Ault
  • 3,268
  • 3
  • 22
  • 24

2 Answers2

158

It's pseudo-class vs pseudo-element distinction.

Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.

Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.
(And also states of actual elements like :hover and :focus.)

Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.

Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

Dominic
  • 2,367
  • 1
  • 15
  • 16
  • 6
    It is because of this distinction that "pseudo-selector" (from the question) is a nonsensical term. Do not use it, ever. – BoltClock Aug 07 '12 at 18:44
  • 2
    unless you are speaking about them both. or in generic terms. – albert Aug 07 '12 at 18:56
  • 1
    This is a great explanation of the theory, but does it have bearing on the practical issue? Is there actually any benefit to using the css3 specification being that the css2 will get the same job done - in more browsers? – DRosenfeld Feb 24 '16 at 16:40
  • @DRosenfeld I've updated the answer slightly to reflect that it's only IE8 that doesn't handle the double colon version of ::before/::after ect. Please do feel free to edit the answer further to improve clarity! – Dominic Feb 25 '16 at 02:30
  • 1
    @Dominic thanks - I appreciate your addressing my comment. There's no question that the issue of support for (at least this) CSS3 tag is almost a non-issue by now. – DRosenfeld Feb 25 '16 at 12:06
  • @albert: But you *can't* speak about them both in generic terms in a way that distinguishes them as a single group from other selector features. These are two distinct selector features altogether. It would be like trying to distinguish selectors and properties under a single umbrella term, from other features such as at-rules (and in that specific case the only good umbrella term you could use to describe them would be "feature"). – BoltClock Jun 05 '18 at 04:18
  • @BoltClock we are actually doing just that. its clear they stand apart because of the colon. pseudo selector is just a tent term they both fall under. mdn does it: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements – albert Jun 05 '18 at 18:17
  • This does not answer the question what the difference is between `:after` and `::after` specifically. Do we expect different behaviour when using the one or the other. – Boris D. Teoharov Jul 27 '18 at 20:12
  • 1
    @BorisD.Teoharov Specifically, you can use `:after` and `::after` interchangeably with identical behaviour with the exception of IE8 which, as the question notes, requires the single colon. – Dominic Jul 31 '18 at 00:42
23

CSS Selectors like ::after are some virtual elements not available as a explicit element in DOM tree. They are called "Pseudo-Elements" and are used to insert some content before/after an element (eg: ::before, ::after) or, select some part of an element (eg: ::first-letter). Currently there is only 5 standard pseudo elements: after, before, first-letter, first-line, selection.

On the other hand, there are other types of selectors called "Pseudo-Classes" which are used to define a special state of an element (like as :hover, :focus, :nth-child(n)). These will select whole of an existing element in DOM. Pseudo classes are a long list with more than 30 items.

Initially (in CSS2 and CSS1), The single-colon syntax was used for both pseudo-classes and pseudo-elements. But, in CSS3 the :: syntax replaced the : notation for pseudo-elements to better distinguish of them.

For backward compatibility, the old single-colon syntax is acceptable for pseudo-elements like as :after (browsers still all support the old syntax with one semicolon). Only IE-8 doesn’t support the new syntax (use single-colon if you want to support IE8).

S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61