:nth-of-type()
:nth-of-type() counts only siblings of the same element type, unlike :nth-child which counts all siblings.
CSS
Intermediate
5 min read
:nth-of-type() Pseudo-Class
Example
/* Select every 2nd paragraph, ignoring other elements */
p:nth-of-type(even) { color: #666; }
/* Select 1st image, even if it is not the 1st child */
img:nth-of-type(1) { float: left; }
/* Compare: nth-child counts ALL siblings */
/* nth-of-type counts only matching tag siblings */
p:nth-child(2) { ... } /* 2nd child, only if it is a <p> */
p:nth-of-type(2) { ... } /* 2nd <p> regardless of position */ Pro Tip
Use :nth-of-type when elements of mixed types are siblings — it gives more predictable results than :nth-child.