HTML and CSS Reference
In-Depth Information
As you can see, both ordered lists are italicized. That's because both of them are
ol
elements that follow an
h2
with whom they share a parent (the
div
).
Pseudo-Class Selectors
Things get really interesting with
pseudo-class selectors
. These selectors let you assign
styles to what are, in effect, phantom classes that are inferred by the state of certain
elements, or markup patterns within the document, or even by the state of the docu-
ment itself.
The phrase “phantom classes” might seem a little odd, but it really is the best way to
think of how pseudo-classes work. For example, suppose you wanted to highlight every
other row of a data table. You could do that by marking up every other row something
like
class="even"
and then writing CSS to highlight rows with that class—or (as we'll
soon see) you could use a pseudo-class selector to achieve exactly the same effect, and
through very similar means.
Combining Pseudo-Classes
Before we start, a word about chaining. CSS makes it possible to combine (“chain”)
pseudo-classes together. For example, you can make unvisited links red when they're
hovered, but visited links maroon when
they're
hovered:
a:link:hover {color: red;}
a:visited:hover {color: maroon;}
The order you specify doesn't actually matter; you could also write
a:hover:link
to the
same effect as
a:link:hover
. It's also possible to assign separate hover styles to unvisited
and visited links that are in another language—for example, German:
a:link:hover:lang(de) {color: gray;}
a:visited:hover:lang(de) {color: silver;}
Be careful not to combine mutually exclusive pseudo-classes. For example, a link can-
not be both visited and unvisited, so
a:link:visited
doesn't make any sense. User
agents will most likely ignore such a selector and thus effectively ignore the entire rule,
although this cannot be guaranteed, as different browsers will have different error-
handling behaviors.
Structural Pseudo-Classes
Thanks to Selectors Level 3, the majority of pseudo-classes are structural in nature; that
is, they refer to the markup structure of the document. Most of them depend on patterns
within the markup, such as choosing every third paragraph, but others allow you to
address specific types of elements. All pseudo-classes, without exception, are a word
preceded by a single colon (
:
), and they can appear anywhere in a selector.
