Псевдокласс last-child выбирает элемент, который является последним потомком родителя.

Синтаксис

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

Примеры

Пример

В данном примере мы сделаем красного цвета тот li, который является последним потомком своего родителя (последним внутри ol):

li:last-child {
	color: red;
}

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

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

Пример

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

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

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

Это абзац

Это h2

Это абзац

Это h2

Это абзац

Это h2

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

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

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

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

Это абзац

Это h2

Это абзац

Это h2

Это абзац

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

Это абзац