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
- :first-letter
represents the first character of the first line of text within an element - :first-line
represents the first formatted line of text - :before
specifies content to be inserted before another element - :after
specifies content to be inserted after another element - ::selection
represents a part of the document that’s been highlighted by the user
User-contributed notes
- ID:
- #3
- 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.
