The :nth-of-type()
CSS pseudo-class matches elements of a given type, 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>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; }
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 | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | Yes | 3.5 | 9 | 9.5 | 3.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 2 | ? | Yes | 4 | 9.5 | 3.1 | ? |
© 2005–2018 Mozilla Developer Network 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