Как обратиться к последнему элементу CSS

Существует несколько способов, как обратиться к последнему элементу в CSS, в зависимости от того, какой элемент требуется выбрать.

Последний дочерний элемент в контейнере

Если вы хотите стилизовать последний дочерний элемент в контейнере, вы можете использовать псевдокласс «last-child». Например:

HTML:

<div class="container">
  <p>Первый абзац</p>
  <p>Второй абзац</p>
  <p>Третий абзац</p>
</div>

CSS:

.container p:last-child {
  /* Ваши стили для последнего абзаца */
  font-weight: bold;
}

Последний элемент определенного типа

Если вы хотите стилизовать последний элемент определенного типа (например, последнюю ссылку на странице), вы можете использовать псевдокласс «last-of-type». Например:

HTML:

<div class="container">
  <a href="#">Ссылка 1</a>
  <a href="#">Ссылка 2</a>
  <a href="#">Ссылка 3</a>
</div>

CSS:

.container a:last-of-type {
  /* Ваши стили для последней ссылки */
  color: red;
}

Последний элемент в списке

Если вам нужно стилизовать последний элемент в списке (например, последний элемент списка ul), вы можете использовать псевдокласс «last-child». Например:

HTML:

<ul>
  <li>Элемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
</ul>

CSS:

ul li:last-child {
  /* Ваши стили для последнего элемента списка */
  text-decoration: underline;
}

Заметьте, что псевдоклассы «last-child» и «last-of-type» применяются только к последнему элементу внутри своего контейнера. Если вы хотите стилизовать последний элемент на странице в целом, вам может понадобится использовать JavaScript.