jQuery селектор :last

Определение и применение

Селектор :last выбирает последний элемент из набора, отобранного предшествующей частью селектора. Например, p:last выбирает последний абзац, а не последний элемент всего документа.

Чтобы выбрать первый элемент дерева DOM необходимо воспользоваться jQuery селектором :first.

jQuery синтаксис:

$("selector:last")

Добавлен в версии jQuery

Селектор в CSS

Пример старого кода

<h2>Заголовок второго уровня</h2>
<div>
  <p>Первый абзац</p>
</div>
<p>Второй абзац</p>
<div>
  <p>Последний абзац</p>
</div>

$(document).ready(function () {
    $('p:first').css('background-color', 'green') // выбираем первый элемент <p> в документе
    $('p:last').css('background-color', 'yellow') // выбираем последний элемент <p> в документе
})

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :last мы выбрали и стилизовали последний элемент <p> в документе, а с помощью селектора :first мы выбрали первый элемент <p>.