CSS псевдокласс :last-of-type
Псевдокласс :last-of-type
применяет заданный стиль к элементу, который является последним дочерним элементом данного типа у своего родителя:
/* Выбор элемента <p>, который является последним элементом
своего типа среди других дочерних элементов или
является единственным дочерним элементом */
p:last-of-type { color: red; }
Наличие дочерних элементов других типов (ссылки, картинки, списки и так далее) не мешают сопоставлению.
Если псевдокласс :last-of-type
используется без других селекторов, ограничивающих его выбор (селектора элемента, класса и так далее):
:last-of-type { color: red; }
то он соответствует всем элементам, которые являются последними элементами своего типа внутри родительского элемента.
Пример
article :last-of-type {
color: #4d4dff;
background: #e6e6ff;
}
<article>
<h2>Заголовок (единственный элемент своего типа)</h2>
<p>Первый абзац с <em>двумя</em> элементами <em>EM</em>
и одним <b>элементом B</b>. (В этом абзаце будет
выделен второй элемент EM, как последний элемент своего
типа, и элемент B, как единственный элемент
своего типа.)</p>
<p>Второй абзац (последний элемент своего типа внутри
элемента ARTICLE).</p>
</article>
Результат
Заголовок (единственный элемент своего типа)
Первый абзац с двумя элементами EM
и одним элементом B. (В этом абзаце будет
выделен второй элемент EM, как последний элемент своего
типа, и элемент B, как единственный элемент
своего типа.)
Второй абзац (последний элемент своего типа внутри
элемента ARTICLE).