The :nth-of-type()
CSS pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings.
/* Selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) { color: lime; }
The nth-of-type
pseudo-class is specified with a single argument, which represents the pattern for matching elements.
See :nth-child
for a more detailed explanation of its syntax.
:nth-of-type( <nth> )where
<nth> = <an-plus-b> | even | odd
<div> <div>This element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>This element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div>
/* Odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* Even paragraphs */ p:nth-of-type(2n) { color: blue; } /* First paragraph */ p:nth-of-type(1) { font-weight: bold; } /* This has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; }
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':nth-of-type' in that specification. | Working Draft | Matching elements are not required to have a parent. |
Selectors Level 3 The definition of ':nth-of-type' in that specification. | Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
:nth-of-type() |
1 | 12
|
3.5 | 9
|
9.5 | 3.1 |
Mobile | ||||||
---|---|---|---|---|---|---|
:nth-of-type() |
2 | 18 | 4 | 10.1 | 3.1 | 1.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type