В чем разница между селекторами :first-child и :first-of-type в CSS?

Разница между селекторами :first-child и :first-of-type в CSS заключается в том, что они выбирают разные элементы. 25

:first-child применяется для выбора элементов, которые являются первыми дочерними элементами своего родителя, независимо от их типа. 12

:first-of-type выбирает не просто первый элемент, а первый элемент своего родителя с учётом его типа. 1 Например, он выберет все элементы p, которые являются первыми элементами указанного типа у своего родителя. 1

Таким образом, :first-child фокусируется на самом первом дочернем элементе, а :first-of-type — на первом элементе определённого типа внутри родителя. 2