W3docs
ru
Войти

Псевдокласс CSS :last-child

Узнайте, как работает псевдокласс CSS :last-child, чем он отличается от :last-of-type, и посмотрите примеры для списков, таблиц и форм.

Псевдокласс CSS :last-child выбирает элемент, являющийся последним дочерним элементом своего родителя — то есть последним среди дочерних узлов родительского элемента. Чаще всего он используется для удаления разделительной границы после последнего элемента списка, сброса нижнего отступа последнего абзаца или выделения последней строки таблицы.

На этой странице рассматривается принцип работы :last-child, критически важное правило, которое часто застаёт разработчиков врасплох, сравнение с :last-of-type, а также несколько запускаемых примеров.

Как работает :last-child

Селектор p:last-child означает не «последний <p> в родителе». Он означает «<p>, который является самым последним дочерним элементом своего родителя». Сначала проверяется позиция, затем — имя тега.

/* Matches the <p> ONLY when it is the final child of its parent */
p:last-child {
  font-weight: bold;
}

Рассмотрим следующую разметку:

<div>
  <p>Paragraph — NOT selected.</p>
  <span>I am the last child, so the rule above never fires.</span>
</div>

Поскольку <span> является последним дочерним элементом, p:last-child здесь ничему не соответствует. Чтобы выбрать последний <p> независимо от того, что стоит после него, используйте :last-of-type.

:last-child — зеркальное отражение :first-child. Для подсчёта с конца (например, предпоследний элемент) используйте :nth-last-child().

Информация

В Selectors Level 3 требовалось, чтобы выбранный элемент имел родителя. В Selectors Level 4 это ограничение снято: :last-child теперь может соответствовать корневому элементу без родителя.

Синтаксис

selector:last-child {
  /* declarations */
}

:last-child можно комбинировать с любым селектором элемента, классом или идентификатором:

li:last-child      { border-bottom: none; }    /* last <li> in its parent */
.card:last-child   { margin-bottom: 0; }       /* last element with class .card */
tr:last-child td   { font-weight: bold; }      /* cells in the last table row */

Базовый пример: абзацы

Оба абзаца ниже являются дочерними элементами <body>. p:last-child соответствует только второму, так как именно он является последним дочерним элементом своего родителя.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-child {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Last-child selector example</h2>
    <p>Lorem ipsum is simply dummy text...</p>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Попробуйте сами »

Пример со списком: стилизация последнего <li>

li:last-child применяется к последнему <li> внутри каждого <ul> или <ol> независимо — вложенные списки имеют собственный последний дочерний элемент.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li:last-child {
        background: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <ul>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ul>
    <ol>
      <li>Paris</li>
      <li>Moscow</li>
      <li>Rome</li>
    </ol>
  </body>
</html>
Попробуйте сами »

Несколько абзацев внутри контейнера

Если четыре элемента <p> являются дочерними одного родителя, только четвёртый из них соответствует p:last-child.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:last-child {
        background: #8ebf42;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </body>
</html>
Попробуйте сами »

Вложенные списки

:last-child применяется независимо на каждом уровне вложенности. В примере ниже «List Item 3» является последним дочерним элементом внешнего <ul>, а «List Item 3.3» — последним дочерним элементом внутреннего <ul>.

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul li {
        color: #8ebf42;
      }
      ul li:last-child {
        border: 1px dotted #8ebf42;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:last-child selector example</h2>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>
        List Item 3
        <ul>
          <li>List Item 3.1</li>
          <li>List Item 3.2</li>
          <li>List Item 3.3</li>
        </ul>
      </li>
    </ul>
  </body>
</html>
Попробуйте сами »

Типичные варианты применения

Удаление завершающего разделителя

Классический паттерн: добавить разделительную границу к каждому элементу, а затем убрать её у последнего, чтобы группа не заканчивалась лишней линией.

.menu li {
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
}

/* Remove the bottom border from the final item */
.menu li:last-child {
  border-bottom: none;
}

Это удобнее, чем вручную добавлять класс к последнему <li>, поскольку селектор автоматически адаптируется при добавлении или удалении элементов.

Удаление отступа у последнего абзаца

Блокам контента часто нужны отступы между абзацами, но не после последнего — иначе отступ абзаца суммируется с padding контейнера.

.content p {
  margin-bottom: 1rem;
}

.content p:last-child {
  margin-bottom: 0;
}

Стилизация последней строки таблицы

table tr:last-child td {
  font-weight: bold;
  border-bottom: 2px solid #333;
}

Это выделяет строку итогов в сводной таблице без добавления класса в HTML.

:last-child vs :last-of-type

Эти два селектора часто путают. Ключевое отличие:

СелекторЧто проверяется
p:last-childЯвляется ли данный <p> последним дочерним элементом своего родителя (по позиции)?
p:last-of-typeЯвляется ли данный <p> последним <p> среди своих братских элементов (по типу, без учёта остальных элементов)?
<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>  <!-- p:last-of-type matches here -->
  <span>A span</span> <!-- this is the last child -->
</div>
  • p:last-child → не соответствует ничему (последний дочерний элемент — <span>, а не <p>).
  • p:last-of-type → соответствует «Paragraph 2» (последний <p> среди братских элементов).

Используйте :last-child, когда важна позиция. Используйте :last-of-type, когда важен только тип элемента.

Специфичность

:last-child — псевдокласс, поэтому он вносит вклад 0-1-0 в специфичность — как и селектор класса. Комбинированные селекторы суммируются обычным образом:

li:last-child        /* specificity: 0-1-1 (type + pseudo-class) */
.list li:last-child  /* specificity: 0-2-1 (class + type + pseudo-class) */

Поддержка браузерами

:last-child поддерживается во всех современных браузерах (Chrome, Firefox, Safari, Edge) начиная с IE 9. Вендорные префиксы и запасные варианты не нужны.

Спецификация

Связанные селекторы

  • :first-child — выбирает первый дочерний элемент своего родителя.
  • :last-of-type — выбирает последний элемент заданного типа, игнорируя другие типы среди братских элементов.
  • :only-child — выбирает элемент, являющийся единственным дочерним у своего родителя.
  • :nth-last-child() — выбирает элементы с конца по формуле.
  • :nth-child() — выбирает элементы с начала по формуле.

Практика

Практика
Что представляет собой псевдокласс CSS :last-child?
Что представляет собой псевдокласс CSS :last-child?
Was this page helpful?