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

Синтаксис

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

Примеры

Пример

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

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

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

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

Пример

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

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

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

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

Это h2

Это абзац

Это h2

Это абзац

Это h2

Это абзац

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

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

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

Это абзац

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

Это абзац

Это h2

Это абзац

Это h2

Это абзац