: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 — он позволяет обратиться к ячейкам последней строки в таблице и убрать у них линию снизу.