Еще один статический псевдокласс, :first-child, применяется для выбора элементов, представляющих собой первые дочерние элементы других элементов. Назначение этого псевдокласса очень легко понять неправильно, поэтому требуется развернутый пример. Рассмотрим следующую разметку:
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Insert key</li>
<li>Turn key clockwise</li>
<li>Push accelerator</li>
</ul>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
</div>
В данном примере первые дочерние элементы – это первый p, первый li и элементы strong и em. По следующим двум правилам:
p:first-child {font-weight: bold;}
li:first-child {text-transform: uppercase;}
получается результат.
Первое правило выделяет полужирным шрифтом любой элемент p, который является первым дочерним элементом другого элемента. Второе правило переводит в верхний регистр текст любого элемента li, являющегося первым дочерним элементом другого элемента (которыми в HTML должны быть элементы ol или ul).
Самая распространенная ошибка – полагать, что такой селектор, как p:first-child, выберет первый дочерний элемент элемента p. Однако вспомните природу псевдоклассов, которая состоит в подключении к ассоциированному с псевдоклассом элементу фантомного класса некоторого типа. Если бы было необходимо добавить в разметку реальные классы, это выглядело бы так:
<div>
<p class="first-child">These are the necessary steps:</p>
<ul>
<li class="first-child">Insert key</li>
<li>Turn key clockwise</li>
<li>Push accelerator</li>
</ul>
<p>
Do <em class="first-child">not</em> push the brake at the same time
as the accelerator.
</p>
</div>
Следовательно, для того чтобы выбрать элементы em, являющиеся первыми дочерними элементами другого элемента, нужна запись em:first-child. Этот селектор позволяет, например, оформлять первый элемент списка, первый абзац элемента div или первый элемент td в строке таблицы. Internet Explorer для Windows вплоть до версии IE6 не поддерживает :first-child, а IE7 поддерживает :first-child.