csscss-selectorspseudo-elementpseudo-class

:after vs. ::after


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

  • 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/