Pseudoklasa CSS :first-of-type wybiera pierwszy element określonego typu spośród grupy elementów siostrzanych, tzn. znajdujących się na tym samym poziomie drzewa dokumentu.
Przykład użycia :first-of-type
W poniższym przykładzie słowa ipsum, sit i amet będą miały czerwony kolor pisma, ponieważ zawierające je span, em i strong są pierwszymi tego typu elementami na tym poziomie drzewa dokumentu (w tym akapicie). Natomiast słowa adipiscing, sed i eiusmod pozostaną niezmienione.
<style>
:first-of-type {color: red}
</style>
…
<p>Lorem <span>ipsum</span> dolor <em>sit</em> <strong>amet</strong> consectetur <span>adipiscing</span> elit, <em>sed</em> do <strong>eiusmod</strong>.</p>:first-child vs :first-of-type
Pseudoklasa :first-child odnosi się do elementu określonego typu, który jest pierwszym dzieckiem innego elementu (tzn. jest pierwszym zagnieżdżonym elementem), natomiast pseudoklasa :first-of-type odnosi się do pierwszego elementu określonego w innym elemencie (przed nim mogą znajdować się inne elementy), np.:
<style>
span:first-child {color: red}
</style>
…
<div>
<p>Akapit <strong>ważnego</strong> i <span>oczywiście</span> ciekawego <span>tekstu</span>.</p>
</div>W tym przypadku pseudoklasa :first-child nie wybierze żadnego elementu span. A teraz spójrz na następujący przykład:
<style>
span:first-of-type {color: red}
</style>
…
<div>
<p>Akapit <strong>ważnego</strong> i <span>oczywiście</span> ciekawego <span>tekstu</span>.</p>
</div>W tym przypadku słowo oczywiście będzie czerwone.
Składnia :first-of-type
Składnia pseudoklasy :first-of-type:
:first-of-type {...}