CSS: The Definitive Guide, 3rd Edition (9 page)

Another static pseudo-class,
:first-child
,
is used to select elements that are the first children of other elements. This
particular pseudo-class is easily misunderstood, so an extended example is in
order. Consider the following markup:

These are the necessary steps:


Insert key

Turn key clockwise

Push accelerator



Do not push the brake at the same time as the accelerator.

In this example, the elements that are first children are the first
p
, the first
li
,
and the
strong
and
em
elements. Given the following two rules:

p:first-child {font-weight: bold;}
li:first-child {text-transform: uppercase;}

you get the result shown in
Figure
2-24
.

Figure 2-24. Styling first children

The first rule boldfaces any
p
element that
is the first child of another element. The second rule uppercases any
li
element that is the first child of another element
(which, in HTML, must be either an
ol
or a
ul
element).

The most common error is to assume that a selector like
p:first-child
will select the first child of a
p
element. However, remember the nature of
pseudo-classes, which is to attach a sort of phantom class to the element
associated with the pseudo-class. If you were to add actual classes to the markup,
it would look like this:

These are the necessary steps:


Insert key

Turn key clockwise

Push accelerator



Do not push the brake at the same time as the
accelerator.

Therefore, if you want to select those
em
elements that are the first children of another element, you write
em:first-child
. This selector allows you to, for
example, style the first item in a list, the first paragraph of a
div
, or the first
td
in a table row.

For situations where you want to select an
element based on its language, you can use the
:lang(
)
pseudo-class. In terms of its matching patterns, the
:lang( )
pseudo-class is exactly like the
|=
attribute selector. For example, to italicize any
element in French, you would
write:

*:lang(fr) {font-style: italic;}

The
primary difference between the pseudo-selector and the attribute selector is that
the language information can be derived from a number of sources, some of which
are outside the element itself. As CSS2.1 states:

Therefore, the pseudo-class is a bit more robust than the
attribute selector and is probably a better choice in most cases where
language-specific styling is needed.

With CSS2.1, you can combine pseudo-classes in the same selector. 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 cannot 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.

The first pseudo-element styles the first letter, and only that letter, of a
block-level element:

p:first-letter {color: red;}

This rule causes the first letter of every paragraph to be colored red.
Alternatively, you could make the first letter of each
h2
twice as big as the rest of the heading:

h2:first-letter {font-size: 200%;}

The result of this rule is illustrated in
Figure 2-25
.

Figure 2-25. The :first-letter pseudo-element in action

As I mentioned, this rule effectively causes the user agent to respond to a
fictional element that encloses the first letter of each
h2
. It would look something like this:

This is an h2 element

The
:first-letter
styles are applied only to
the contents of the fictional element shown in the example. This

element does
not
appear in the document source. Instead, its existence is
constructed on the fly by the user agent and is used to apply the
:first-letter
style(s) to the appropriate block of
text. In other words,

is a pseudo-element. Remember, you don't have to add any new tags. The user agent
will do it for you.

Similarly,
:first-line
can be used to affect the first
line of text in an element. For example, you could make the first line of each
paragraph in a document
purple:

p:first-line {color: purple;}

In
Figure 2-26
, the style is applied
to the first displayed line of text in each paragraph. This is true no matter how
wide or narrow the display region is. If the first line contains only the first
five words of the paragraph, then only those five words will be purple. If the
first line contains the first 30 words of the element, then all 30 will be
purple.

Figure 2-26. The :first-line pseudo-element in action

Because the text from "This" to "only" should be purple, the user
agent employs a fictional markup that looks something like
this:

This is a paragraph of text that has only
one stylesheet applied to it. That style
causes the first line to be purple. No other ...

If
the first line of text were edited to include only the first seven words of the
paragraph, then the fictional

would move back and occur just after the word
"that."

In CSS2, the
:first-letter
and
:first-line
pseudo-elements can be applied only to block-level
elements such as headings or paragraphs and not to inline-level elements such as
hyperlinks. In CSS2.1,
:first-letter
applies to
all elements. There are also limits on the CSS properties that may be applied to
:first-line
and
:first-letter
.
Table
2-4
displays the limits.

In addition, all pseudo-elements must be placed at the very end of the selector
in which they appear. Therefore, it would not be legal to write
p:first-line em
since the pseudo-element comes before
the subject of the selector (the subject is the last element listed). The same
rule applies to the other two pseudo-elements CSS2.1 defines.

Let's say you want to preface
every
h2
element with a pair of silver square
brackets as a typographical
effect:

h2:before {content: "]]"; color: silver;}

CSS2.1
lets you insert
generated content
,
and then style it directly using the
pseudo-elements
:before
and
:after
.
Figure
2-27
illustrates an example.

Figure 2-27. Inserting content before an element

The pseudo-element is used to insert the generated content and to
style it. To place content after an element, use the pseudo-element
:after
. You could end your documents with an
appropriate
finish:

body:after {content: "  The End.";}

Generated
content is a separate subject, and the entire topic (including more detail on
:before
and
:after
) is covered more thoroughly in
Chapter 12
.