Псевдокласс first-of-type

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

Синтаксис

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

Пример

Найдем абзац, который является первым абзацем в родителе:

<div>
	<h2>заголовок</h2>
	<p>абзац</p>
	
	<h2>заголовок</h2>
	<p>абзац</p>
	
	<h2>заголовок</h2>
	<p>абзац</p>
</div>

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