Pseudo-element selectors are distinguished from pseudo-class selectors by the fact that the latter affect elements when they are in particular states (for example, a:hover controlling the appearance of links when the mouse is over them). Pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.
With CSS3, the W3C instituted the convention that pseudo-element selectors should be preceded by two colons, to distinguish them from pseudo-class selectors, which get just one. In theory, modern browsers should recognize this rule, and they do… except for IE6 – 8. Also in theory, browsers should honour single colons in front of pseudo-element selectors that were present in CSS1 and 2, but I’ve found that certain browser versions do not. Personally, I’d go with the W3C recommendation.
As before, I’ve linked to articles in the blog where appropriate.
| Pseudo-element selector | Purpose |
|---|---|
::first-line | Selects the first line of content in an element. Typically applied to paragraphs (for example |
::first-letter | Selects the first letter of an element. Typically applied to paragraphs or headings (for example, |
::before | Inserts content before a selection. Has all sorts of uses: generating opening quote marks for pull quotes, creating separators for navigation bar links, and much more. |
::after | Just like |
::selection |
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
