Псевдокласс last-of-type выбирает элемент, который является последним потомком родителя заданного типа. То есть, если я напишу h2:last-of-type - найдется последний h2 в родителе (в отличии от last-child, который найдет только тот h2, который стоит самым последним в родителе).

Синтаксис

селектор:last-of-type {
	
}

Примеры

Пример

В данном примере мы сделаем красного цвета тот li, который является последним li внутри своего родителя (в данном случае разницы между last-of-type и last-child нет, так как все потомки одного типа - это li):

li:last-of-type {
	color: red;
}

Результат выполнения кода:

  1. пункт
  2. пункт
  3. пункт
  4. пункт
  5. пункт
  6. пункт
  7. пункт
  8. пункт
  9. пункт
  10. пункт
  11. пункт

Пример

Посмотрите на разницу между last-of-type и last-of-type: в данном примере мы ищем h2, который является последним потомком родителя (h2:last-of-type) и не находим, так как последним потомком будет последний абзац (так p:last-of-type мы бы поймали этот абзац).

<div>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац (последний потомок)
	</p>
</div>
h2:last-of-type {
	color: red;
}

Результат выполнения кода:

Это абзац

Это h2

Это абзац

Это h2

Это абзац

Это h2

Это абзац (последний потомок)

А сейчас мы ищем h2, который является последним h2 в родителе:

<div>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2 (последний h2 в родителе)</h2>
	<p>
		Это абзац
	</p>
</div>
h2:last-of-type {
	color: red;
}

Результат выполнения кода:

Это абзац

Это h2

Это абзац

Это h2

Это абзац

Это h2 (последний h2 в родителе)

Это абзац