:after vs. ::after

Question

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?

Solution 1

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/

Solution 2

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).

Comments

[BoltClock]

It is because of this distinction that "pseudo-selector" (from the question) is a nonsensical term. Do not use it, ever.

[albert]

unless you are speaking about them both. or in generic terms.

[DRosenfeld]

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?

[Dominic]

@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!

[DRosenfeld]

@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.

[BoltClock]

@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").

[albert]

@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: developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_C‌​SS/…

[Boris D. Teoharov]

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.

[Dominic]

@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.