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

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

Синтаксис

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

Пример

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

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

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

Результат: