:after vs. ::after
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/
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).