Pseudo-elements

Pseudo-elements match virtual elements that don’t exist explicitly in the document tree. Pseudo-elements can be dynamic, inasmuch as the virtual elements they represent can change, for example, when the width of the browser window is altered. They can also represent content that’s generated by CSS rules.

In CSS1 and CSS2, pseudo-elements start with a colon (:), just like pseudo-classes. In CSS3, pseudo-elements start with a double colon (::), which differentiates them from pseudo-classes.

CSS1 gave us :first-letter and :first-line; CSS2 gave us generated content and the :before and :after pseudo-elements; and CSS3 added ::selection.

In this Section

User-contributed notes

ID:
#3
Contributed:
by Paul O'B
Date:
Sat, 07 May 2011 16:06:15 GMT
Status:
This note has not yet been confirmed for accuracy and relevance.

Don't use pseudo elements in comma separated rules because if the browser doesn't understand the pseudo element it jumps out of the list and none of the subsequent comma separated rules are actioned (apart from ie6 and 7 which read the rest of the rules with no problem).

a:last-child,
a{background:red;display:block}

IE8 doesn't understand last-child and therefore remains completely unstyled.

Related Products