midCSS
Explain :nth-child() vs :nth-of-type().
Updated Apr 28, 2026
Short answer
:nth-child() counts all sibling elements regardless of type. :nth-of-type() counts only siblings of the specified tag type.
Deep explanation
If you have a div containing an h1 and several p tags, p:nth-child(2) targets the first paragraph (because the h1 is the first child overall). p:nth-of-type(2) targets the second paragraph, ignoring the h1 entirely in its count.
Real-world example
Creating a zebra-striped table or list where header elements shouldn't interfere with the alternating row colors.
Common mistakes
- Using `:nth-child` on a component list where a hidden structural element (like a span) unexpectedly offsets the counting logic.
Follow-up questions
- How does the formula an+b work in nth-child?