HTML and CSS Reference
In-Depth Information
Using this order ensures that your
:hover
styles will work whether a link has been visited or
not, and that your
:active
styles will be used even when a user is hovering over a link.
For more on link specificity, check out Eric Meyer's write-up on the subject (which also
includes some great points about calculating specificity in general):
www.meyerweb.com/eric/
css/link-specificity.html
.
Pseudo-Elements
In what is one of the shortest (but still confusing) descriptions in the CSS specification, the W3C
has this to say about
pseudo-elements
(
www.w3.org/TR/CSS21/selector.html#pseudo-elements
):
Pseudo-elements create abstractions about the document tree beyond those specified by
the document language.
Well, now, that sums it up nicely, don't you think?
Pseudo-elements can be powerful weapons in your CSS arsenal, and include the follow-
ing four gems:
•
:first-line
•
:first-letter
•
:before
•
:after
Their use is similar to that of pseudo-classes; however, pseudo-elements may only be
attached to the last simple selector in a combined selector (the element is targeted by the
selector, referred to by the W3C as the “subject”).
■
Caution
The
:first-line
and
:first-letter
pseudo-elements are supported by IE 6 (
:before
and
:after
are still not supported by anyversion of IE/Win including IE 7 as of this writing), but there are some
pitfalls. For an up-to-date list (including IE 7 issues), visit Ingo Chao's site at
www.satzansatz.de/cssd/
pseudocss.html
.
:first-line
As you might guess, the
:first-line
pseudo-element targets the first line of the element to
which it is attached, and that element must be defined or styled as
block-level
,
inline-block
,
table-caption
, or
table-cell
. There is also a restricted list of properties that may be used:
•
font properties
•
color
•
background properties
•
word-spacing