HTML and CSS Reference
In-Depth Information
Figure 1-30. Selecting last-of-type tables
Similar to what was noted in the previous section, you can combine these two pseudo-
classes to create a version of
:only-of-type
. The following two rules will select the same
elements:
table:only-of-type{color: red;}
table:first-of-type:last-of-type {background: red;}
Selecting every nth child
If you can select elements that are the first, last, or only children of other elements, how
about second children? Third children? Ninth children? Rather than define a literally
infinite number of named pseudo-classes, CSS has the
:nth-child()
pseudo-class. By
filling integers or even simple algebraic expressions into the parentheses, you can select
any arbitrarily numbered child element you like.
Let's start with the
:nth-child()
equivalent of
:first-child
, which is
:nth-child(1)
.
In the following example, the selected elements will be the first paragraph and the first
list item.
p:nth-child(1) {font-weight: bold;}
li:nth-child(1) {text-transform: uppercase;}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
</div>
If we were to change the numbers from
1
to
2
, however, then no paragraphs would be
selected, and the middle list item would be selected, as illustrated in
Figure 1-31
.
p:nth-child(2) {font-weight: bold;}
li:nth-child(2) {text-transform: uppercase;}
You can of course insert any integer your choose; if you have a use case for selecting
any ordered list that is the 93rd child element of its parent, then
ol:nth-child(93)
is
