Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the :
followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::
) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
- show the URLs of links in printed docs
- fake a
float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors
that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child
. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors