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

Синтаксис

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

Примеры

Пример

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

li:first-child {
	color: red;
}

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

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

Пример

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

<div>
	<p>
		Это абзац (первый потомок)
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
	<h2>Это h2</h2>
	<p>
		Это абзац
	</p>
</div>
h2:first-child {
	color: red;
}

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

Это абзац (первый потомок)

Это h2

Это абзац

Это h2

Это абзац

Это h2

Это абзац

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

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

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

Это абзац

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

Это абзац

Это h2

Это абзац

Это h2

Это абзац