CSS псевдокласс :last-of-type
Псевдокласс CSS :last-of-type выбирает последний элемент своего типа среди дочерних элементов родителя. Примеры и описание.
Псевдокласс CSS :last-of-type выбирает элемент, являющийся последним элементом своего типа среди дочерних элементов своего родителя. Под «типом» здесь подразумевается имя тега — поэтому p:last-of-type совпадает с последним <p> внутри родителя, независимо от того, сколько других элементов (div, заголовков, span) стоит после него.
На этой странице рассматривается, с чем совпадает :last-of-type, его синтаксис, поведение для различных типов элементов, а также — что важно — чем он отличается от похожего псевдокласса :last-child.
Псевдокласс :last-of-type эквивалентен :nth-last-of-type(1) и выбирает тот же самый элемент.
Когда применять
Используйте :last-of-type, когда нужно стилизовать последний элемент заданного тега, не полагаясь на его точную позицию. Типичные случаи:
- Удаление нижнего отступа или границы у последнего абзаца в карточке.
- Стилизация последнего элемента списка, изображения или секции в контейнере со смешанными типами элементов.
- Нацеливание на «последний из своего вида», когда нельзя быть уверенным, что он также является самым последним дочерним элементом родителя.
Если же нужен элемент, буквально являющийся последним дочерним элементом родителя — вне зависимости от его типа — используйте :last-child. Сравнение приведено ниже.
Версия
Синтаксис
Синтаксис CSS :last-of-type
:last-of-type {
css declarations;
}Пример использования селектора :last-of-type:
Пример кода :last-of-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-of-type {
background: #8ebf42;
font-style: italic;
color: #eeeeee;
}
</style>
</head>
<body>
<h2>:last-of-type selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>Применение к родительским элементам
Селектор также можно применять к родительским элементам.
The * selector is implied when no type selector is specified (e.g., *:last-of-type is equivalent to :last-of-type).
В приведённом ниже примере article:last-of-type стилизует последний <article> среди его братских элементов. Обратите внимание, что псевдокласс оценивается по типу внутри каждого родителя: элементы <em> группируются отдельно от элементов <div> и <b>, поэтому у каждого тега есть свой «последний из типа».
Пример применения к родительскому элементу:
CSS псевдокласс :last-of-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
article:last-of-type {
background-color: #8ebf42;
}
</style>
</head>
<body>
<article>
<div>This "div" is first.</div>
<div>This <span>nested "span" is last</span>!</div>
<div>This <em>nested "em" is first</em>, but this <em>nested "em" is last</em>!</div>
<b>This "b" qualifies!</b>
<div>This is the final "div"!</div>
</article>
</body>
</html>:last-of-type против :last-child
Селекторы :last-child и :last-of-type выглядят похоже, но отвечают на разные вопросы:
:last-childсовпадает с элементом только в том случае, если он является самым последним дочерним элементом своего родителя — важна позиция, а не тип.:last-of-typeсовпадает с последним элементом заданного типа, даже если после него идут другие элементы.
Таким образом, p:last-of-type совпадает с последним <p>, даже когда за ним следует <span>, тогда как p:last-child не совпадёт с этим <p> вообще (поскольку <span> является фактическим последним дочерним элементом). В примере ниже правило применяется к последнему абзацу независимо от span-элементов, а span:last-child нацеливается только на последний span — который оказывается последним дочерним элементом body.
Пример селекторов CSS :last-of-type и :last-child:
Селекторы :last-of-type и :last-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-of-type {
background: #8ebf42;
font-style: italic;
color: #eee;
}
span {
display: block;
}
span:last-child {
background: #8ebf42;
font-style: italic;
font-weight: bold;
color: #eee;
padding: 10px;
}
</style>
</head>
<body>
<h2>:last-of-type and :last-child selectors example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<span>Some text</span>
<span>Some text</span>
<span>Some text</span>
</body>
</html>Нюансы
:last-of-typeдействует в рамках каждого родителя: у каждого родительского элемента есть свой «последний абзац», «последний div» и так далее.- Псевдокласс работает только с типами элементов. Эквивалента на основе класса не существует —
.box:last-of-typeозначает «последний элемент, тип которого совпадает с элементом, также имеющим классbox», а не «последний элемент с классомbox». Для более тонкого управления используйте:last-childв сочетании с классом или:nth-last-of-type(). - Если у родителя есть только один элемент заданного типа, этот одиночный элемент является одновременно своим
:last-of-typeи:first-of-type.
Связанные селекторы
:first-of-type— первый элемент своего типа.:nth-of-type()и:nth-last-of-type()— совпадение по типу на основе позиции.:only-of-type— элемент, являющийся единственным своего типа.:last-child— последний дочерний элемент независимо от типа.