Псевдокласс :first-of-type применяет заданный стиль к элементу, который является первым дочерним элементом данного типа у своего родителя:
/* Выбор элемента <p>, который является первым элементом
своего типа среди других дочерних элементов или
является единственным дочерним элементом */
p:first-of-type { color: red; }Наличие дочерних элементов других типов (ссылки, картинки, списки и так далее) не мешают сопоставлению.
Если псевдокласс :first-of-type используется без других селекторов, ограничивающих его выбор (селектора элемента, класса и так далее):
:first-of-type { color: red; }то он соответствует всем элементам, которые являются первыми элементами своего типа внутри родительского элемента.
article :first-of-type {
color: #4d4dff;
background: #e6e6ff;
}<article>
<h2>Заголовок (единственный элемент своего типа)</h2>
<p>Первый абзац (первый элемент своего типа внутри
элемента ARTICLE).</p>
<p>Второй абзац с <em>двумя</em> элементами <em>EM</em>
и одним <b>элементом B</b>. (В этом абзаце будет
выделен первый элемент EM, как первый элемент своего
типа, и элемент B, как единственный элемент
своего типа.)</p>
</article>Результат
Первый абзац (первый элемент своего типа внутри элемента ARTICLE).
Второй абзац с двумя элементами EM и одним элементом B. (В этом абзаце будет выделен первый элемент EM, как первый элемент своего типа, и элемент B, как единственный элемент своего типа.)