HTML and CSS Reference
In-Depth Information
8.3.4.3. Nesting and language pseudoclasses
The CSS2
:first-child
pseudoclass lets you specify how an element
may be rendered when it is the first instance, or child, of the containing
element. For instance, the following rule gets applied to a paragraph
when it is the first element of a division; there can be no intervening ele-
ments (notice the special greater-than bracket syntax relating the first
child with its parent element):
div > p:first-child {font-style: italic}
Accordingly, the first paragraph in the following HTML fragment would
be rendered in italics by a CSS2-compliant browser because it is the first
child element of its division. Conversely, the second paragraph comes
after a level-2 header, which is the first child of the second division. So,
that second paragraph in the example gets rendered in plain text, be-
cause it is not the first child of its division (
Figure 8-5
):
<div>
<p>
I get to be in italics because my paragraph is the first child of the division.
</p>
</div>
<div>
<h2> New Division</h2>
<p>
I'm in plain text because my paragraph is a second child of the division.
