:first-child и :last-child
Псевдокласс :first-child позволяет задать стиль для первого дочернего элемента из группы братских элементов, то есть таких, у которых один родитель.
Для демонстрации воспользуемся следующим списком.
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Все элементы <li> здесь равны между собой и имеют общего родителя <ul>. Таким образом, :first-child выберет первый пункт списка с текстом «Uno».
Селектор :first-child выбирает все первые элементы в каждой группе веб-страницы, что обычно не требуется. Для сокращения охвата к :first-child нужно добавить селектор элемента — p:first-child. Эту запись следует читать справа налево — сперва выбирается первый элемент, затем проверяется что это элемент <p>. Если первым элементом будет <p>, то к нему применяются стилевые правила; если первым оказывается другой элемент (не <p>), то стиль к нему не применяется.
Сложности с пониманием работы :first-child обычно возникают при чередовании разных элементов, как показано ниже.
<section>
<p>Один</p>
<div>Uno</div>
<p>Два</p>
<div>Dos</div>
<p>Три</p>
<div>Tres</div>
</section>
Следующий стиль сделает текст первого элемента внутри <section> зелёным («Один»). При этом мы не указываем какой это элемент, так что простая перестановка строк в HTML будет делать любую первую строку зелёной.
section > :first-child { color: green; }
Добавление div к селектору не даёт никакого результата — ни одна из строк не станет зелёной. Здесь берётся первый элемент и сравнивается, является ли он <div>. Поскольку первым элементом внутри <section> у нас идёт <p>, то стиль применяться не будет.
section > div:first-child { color: green; }
Заменив div на p получим первую строку зелёной, поскольку первым элементом у нас идёт именно <p>.
section > p:first-child { color: green; }
Аналогично :first-child работает и :last-child, только он определяет последний элемент в группе. К примеру, следующий стиль сделает зелёной строку с текстом «Tres», поскольку элемент <div> идёт последним.
section > div:last-child { color: green; }
Псевдоклассы :first-child и :last-child обычно применяются в списках и таблицах, где последовательно идут одни и те же элементы. В примере 1 между пунктами горизонтального списка добавляется вертикальная линия через свойство border-left. Чтобы убрать линию у первого пункта используем псевдокласс :first-child.
Пример 1. :first-child для списка
Результат данного примера показан на рис. 1.
Рис. 1. Список с вертикальными линиями
Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.
Интересные линии можно получить за счёт комбинации светлых и тёмных границ. На рис. 2 показана таблица, в которой ячейки выделяются такими границами.
Рис. 2. Границы в таблице
К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).
Пример 2. Использование :last-child
Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.