Pseudoklasa CSS :nth-of-type()

Pseudoklasa CSS :nth-of-type() wybiera elementy na podstawie ich miejsca w grupie elementów siostrzanych tego samego typu. Działa bardzo podobnie do pseudoklasy :nth-child(), ale różni się od niej ważnym szczegółem – wybiera elementy określonego typu znajdujące się na tym samym poziomie hierarchii drzewa dokumentu HTML, ale nie muszą one do siebie przylegać.

Pseudoklasa :nth-of-type() przyjmuje takie same wartości, jak pseudoklasa :nth-child()(), słowa kluczowe odd i even oraz wartość utworzoną według wzoru an+b. Ich szczegółowe omówienie znajduje się w opisie składni pseudoklasy :nth-child().

Przykłady użycia :nth-of-type()

W poniższym przypadku selektor p:nth-of-type(2n) sprawi, że czerwony kolor tekstu będą miały akapity drugi i czwarty. Mimo że nie przylegają one do siebie, to jednak znajdują się na tym samym poziomie hierarchii drzewa dokumentu – wszystkie są dziećmi tego samego elementu article.

<style>
  p:nth-of-type(2n) {color: red}
</style>
  …
<article>
  <p>Pierwszy akapit</p>
  <aside>Jakaś uwaga na marginesie</aside>
  <p>Drugi akapit</p>
  <aside>Inna uwaga na marginesie</aside>
  <p>Trzeci akapit</p>
  <div>Jakiś bliżej niezidentyfikowany fragment treści</div>
  <p>Czwarty akapit</p>
</article>

Efekt działania tej reguły CSS jest pokazany na poniższym zrzucie ekranu.

A teraz spójrz na poniższy przykład:

<style>
  p:nth-child(2n) {color: red}
</style>
  …
<article>
  <p>Pierwszy akapit</p>
  <aside>Jakaś uwaga na marginesie</aside>
  <p>Drugi akapit</p>
  <aside>Inna uwaga na marginesie</aside>
  <p>Trzeci akapit</p>
  <div>Jakiś bliżej niezidentyfikowany fragment treści</div>
  <p>Czwarty akapit</p>
</article>

Ten kod różni się od poprzedniego tylko selektorem. W tym przypadku selektor p:nth-child(2n) nie wybrałby żadnego akapitu, ponieważ elementy te nie przystają do siebie.

Natomiast w poniższym przykładzie czerwony kolor tekstu miałyby akapity drugi i czwarty:

p:nth-child(2n) {color: red}
…
<article>
  <p>Pierwszy akapit</p>
  <p>Drugi akapit</p>
  <p>Trzeci akapit</p>
  <p>Czwarty akapit</p>
</article>

Selektor p:nth-child(2n) wybrałby drugi i czwarty akapit, ponieważ te elementy znajdują się na tym samym poziomie hierarchii drzewa dokumentu oraz przystają do siebie.

Składnia

Składnia pseudoklasy :nth-of-type:

:nth-of-type(odd | even | an+b) {...}