The :nth-of-type()
CSS pseudo-class matches one or more 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; }
Syntax
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.
Formal syntax
:nth-of-type( <nth> )
Examples
Basic example
HTML
<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>
CSS
/* 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; }
Result
Specifications
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. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 3.5 (1.9.1) | 9.0 | 9.5 | 3.1 |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | 1.0 (1.9.1) | 9.0 | 9.5 | 3.1 |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
xgqfrms-GitHub,
chrisdavidmills,
PoppinL,
PyroLagus,
erikadoyle,
max.nordlund,
Sebastianz,
psylar,
MusikAnimal,
kscarfone,
Sheppy,
joyously,
wlach,
teoli,
jswisher,
tw2113,
McGurk,
miken32
Last updated by:
mfluehr,