:nth-of-type()
Selects elements by position among siblings with the same tag, for example every other image or the third paragraph.
Example
#.chat p:nth-of-type(odd) {
justify-self: start;
background: #27272a;
}
.chat p:nth-of-type(even) {
justify-self: end;
background: #7c3aed;
}<style>
.chat p { margin: 0; padding: 6px 12px; border-radius: 12px; max-width: 75%; }
.chat time { justify-self: center; color: #71717a; font-size: 12px; }
</style>
<div class="chat stage" style="display: grid; gap: 6px;">
<time>10:02</time>
<p>Hey! How’s learning CSS going?</p>
<p>Good, I’m practicing selectors right now.</p>
<p>Try :nth-of-type(), it only counts paragraphs.</p>
<p>It works! The timestamps don’t break the order.</p>
</div>The timestamps in time elements sit between the messages, but they don’t disturb the alternating layout, since only the paragraphs are counted.
Definition and usage
#The :nth-of-type() pseudo-class works like :nth-child(), but only counts siblings with the same tag. In an article where paragraphs alternate with images, p:nth-of-type(2) points to the second paragraph, even if three images come before it.
It takes the same arguments: a number, odd, even, and the An+B formula. The argument-free versions are :first-of-type and :last-of-type, and counting from the end is done with :nth-last-of-type().
Important: "type" means the tag name, not the class. The selector .card:nth-of-type(2) doesn’t select the second card. It selects the element with the class card that is the second element of its tag (e.g. the second div) within the parent. To count by class, use :nth-child(2 of .card).
Syntax
#:nth-of-type( <number> | odd | even | An+B )Arguments
#span 2
The secondspan, even though it’s the third child of the parent.emelements aren’t counted.em 1, em 3
The odd-numberedemelements: the first and third. Each tag has its own count.span 2, span 4
The even-numberedspanelements, with no regard for theemelements standing between them.span 3, span 4
From the thirdspanelement to the last.nothing
For comparison,span:nth-child(2)selects nothing, because the parent’s second child is anem.
Arguments in practice
#2
span, even though it’s the third child of the parent. em elements aren’t counted.span:nth-of-type(2) { background: #7c3aed; color: #fff; }odd
em elements: the first and third. Each tag has its own count.em:nth-of-type(odd) { background: #7c3aed; color: #fff; }even
span elements, with no regard for the em elements standing between them.span:nth-of-type(even) { background: #7c3aed; color: #fff; }n+3
span element to the last.span:nth-of-type(n+3) { background: #7c3aed; color: #fff; }:nth-child(2)
span:nth-child(2) selects nothing, because the parent’s second child is an em.span:nth-child(2) { background: #7c3aed; color: #fff; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Use
:nth-of-type()when different tags are mixed within the parent, for example paragraphs, images, and headings. - Don’t combine it with a class hoping it will count classes. It only counts tags, so for classes use
:nth-child(… of .class).
Related entries
#- :nth-child() vs :nth-of-type()nth-child() counts every one of the parent’s elements, regardless of tag. nth-of-type() only counts siblings that share the same tag as the chosen selector.
- :nth-child()Selects elements by position among siblings: every other one, every third, the first three, or everything from the seventh on.
- :first-childMatches an element that is the first child of its parent.
- :last-childMatches an element that is the last child of its parent.
- Type selectorSelects every element with a given tag name, for example every p paragraph or every li list item.
- :not()Selects elements that match neither the given selector nor any selector in the list.
Spotted a mistake or missing an example? Write to us.