The Difference Between Pseudo-Classes and Pseudo-Elements

A pseudo-class is a feature of an HTML element that can be styled but is not available via the document tree. Pseudo-classes are often used with the anchor tag: a:link, a:hover, a:visited, and a:active. Some pseudo-classes can accept values such as lang :lang pseudo-class: p:lang(fr), :lang(de).

Pseudo-elements are abstract sub-elements of an html document: ::first-letter and ::first-line are examples.

If you were an HTML element the state of your eyes being closed, open or squinting would be a pseudo-class, and your pinky toe would be a pseudo element. Go ahead and do this exercise yourself to sort pseudo-classes and pseudo-elements. 🙂 What would your grandmother be? (hint: “behind”)

Previously, pseudo-classes and pseudo-elements have looked exactly the same: element:pseudo-something. Which is kind of nasty considering the mental energy that goes into separating these ideas. But the Level 3 recommendation has improved the visual distinction. Pseudo-classes continue to use one colon, and pseudo-elements, going forward, use two.

Pseudo-elements with one colon will always be supported for existing pseudo-elements, but that’s not true for pseudo-elements that are introduced, so we aught to get in the habit of using two colons.

Burn the following selectors into your mind:

::after
::before
::first-letter
::first-line
::selection

and to contrast:

:target
:focus
:enabled
:disabled

Should we worry about browser support for the new syntax of pseudo-elements? Nah, progressive enhancement, Baby! It is indicated that earlier versions of Internet Explorer do not support two colons but I have confirmed that IE 8 supports all, with the exception of ::selection, perhaps. In this case I would use two colons and not try to write both in your style sheets.