: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 для списка

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:first-child</title> <style> ul { background: #86328c; /* Цвет фона */ padding: 0; /* Обнуляем */ } li { display: inline-block; /* Выстраиваем по горизонтали */ color: #eedfac; /* Цвет текста */ padding: 10px; /* Поля вокруг текста */ border-left: 1px solid #f190ac; /* Линия слева */ } li:first-child { /* Для первого элемента */ border-left: none; /* убираем линию */ } </style> </head> <body> <ul> <li>Uno</li><li>Dos</li><li>Tres</li> </ul> </body> </html>

Результат данного примера показан на рис. 1.

Список с вертикальными линиями

Рис. 1. Список с вертикальными линиями

Аналогичный результат достигается и с помощью :last-child, только вместо линии слева надо сделать её справа через свойство border-right.

Интересные линии можно получить за счёт комбинации светлых и тёмных границ. На рис. 2 показана таблица, в которой ячейки выделяются такими границами.

Границы в таблице

Рис. 2. Границы в таблице

К каждой ячейке добавляется белая линия справа и сверху, а также серая линия слева и снизу. :first-child и :last-child применяются для отмены линий у первой и последней ячеек в строке (пример 2).

Пример 2. Использование :last-child

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:first-child</title> <style> table { background: #f7f7f7; /* Цвет фона */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ border: 1px solid #ccc; /* Параметры рамки */ } th, td { padding: 10px; /* Поля в ячейках */ } th { background: #e9e9e9; /* Цвет фона заголовка */ } th, td { border-left: 1px solid #ccc; border-right: 1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #ccc; } th:first-child, td:first-child { border-left: none; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } </style> </head> <body> <table> <thead> <tr> <th>Значение</th> <th>Значение по умолчанию</th> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>top</td> <td>Да</td> <td>Располагает заголовок по верхнему краю таблицы.</td> </tr> <tr> <td>bottom</td> <td>Нет</td> <td>Заголовок располагается под таблицей.</td> </tr> </tbody> </table> </body> </html>

Обратите внимание на селектор tr:last-child td — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 12.03.2020
Редакторы: Влад Мержевич