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

Чтобы успешно использовать псевдокласс last-child (последний потомок), нужно разобраться с потомками и родственными отношениями в CSS. Допустим, у нас есть следующая разметка:

<article>
  <div>
    <p>Along the shore the cloud waves break,</p>
    <p>The twin suns sink behind the lake,</p>
    <p>The shadows lengthen</p>
    <p>In Carcosa.</p>
  </div>
  <div>
    <p>Strange is the night where black stars rise,</p>
    <p>And strange moons circle through the skies,</p>
    <p>But stranger still is</p>
    <p>Lost Carcosa.</p>
  </div>
</article>

Если нам нужно задать отступ последним элементам абзацев в каждом блочном элементе, это можно сделать следующими способами: применить встроенные стили, что очень неудобно, их трудоемко поддерживать и изменять, на это нужно много времени, или использовать повторяющийся класс, это уже лучше, но по-прежнему создание, применение и изменение занимает много времени, или задать псевдокласс nth-child (энный потомок) или наиболее подходящий в этом случае вариант — last-child (последний потомок):

article p:last-child { text-indent: 2rem; }

И в результате получим следующее:

Как было сказано выше, можно создать этот эффект, используя псевдокласс nth-child:

article p:nth-child(4) {
  text-indent: 2rem;
}

Это особенно удобно для стихов, как в примере выше, где заранее известно, сколько строк в каждой строфе.

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

…
    <p>In Carcosa.</p>
    <hr>
</div>

Тогда абзац не является последним потомком блока и правило не сработает. В таких случаях будет полезен псевдокласс last-of-type (последний этого типа).

Этот псевдокласс находит последнее упоминание этого типа элемента и устанавливает ему указанные свойства:

article p:last-of-type { text-indent: 2rem; }

Запись выше будет иметь такой же эффект, как и запись с использованием last-child, если абзац — последний элемент в блоке. Обратите внимание на то, что оба псевдокласса могут использоваться вместе с другими: например, если нужно обратиться к последнему упоминанию определенного класса.

Хороший пример использования псевдокласса last-of-type — удаление визуальных эффектов, которые применяются ко всем элементам, у последнего элемента. Например, для меню:

<nav>
    <a href="#">Home</a>
    <a href="#">About Us</a>
    <a href="#">Products</a>
</nav>

У каждой ссылки есть рамка справа, предназначенная для отделения этой ссылки от соседней:

nav a { border-right: 1px solid #000; }

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

nav a { border-right: 1px solid #000; }
nav a:last-child { border-right: none; }

Еще удобней записать это в одну строку кода CSS, объединив эти две записи с помощью отрицающего псевдокласса:

nav a:not(:last-child) { border-right: 1px solid #000; }

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование селекторов first-of-type, first-child и nth-of-type
• Использование селектора only-of-type
• Фоновые изображения для экранов Retina с использованием свойства задания изображения