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.
Efekt działania tej reguły CSS jest pokazany na poniższym zrzucie ekranu.
A teraz spójrz na poniższy przykład:
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:
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) {...}