The :nth-child()
CSS pseudo-class matches elements based on their position in a group of siblings.
/* Selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; }
The nth-child
pseudo-class is specified with a single argument, which represents the pattern for matching elements.
odd
even
<An+B>
An+B
, for every positive integer or zero value of n
. The index of the first element is 1
. The values A
and B
must both be <integer>
s.:nth-child( <nth> [ of <complex-selector-list> ]? )where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i
tr:nth-child(odd)
or tr:nth-child(2n+1)
tr:nth-child(even)
or tr:nth-child(2n)
:nth-child(7)
:nth-child(5n)
:nth-child(3n+4)
:nth-child(-n+3)
p:nth-child(n)
<p>
element in a group of siblings. This selects the same elements as a simple p
selector (although with a higher specificity).p:nth-child(1)
or p:nth-child(0n+1)
<p>
that is the first element in a group of siblings. This is the same as the :first-child
selector (and has the same specificity).p:nth-child(n+8):nth-child(-n+15)
<p>
elements of a group of siblings.<h3><code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></code> among the child elements.</h3> <p>Children 1, 3, 5, and 7 are selected.</p> <div class="first"> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span 7!</span> </div> <br> <h3><code>span:nth-child(2n+1)</code>, WITH an <code><em></code> among the child elements.</h3> <p>Children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't selected because it isn't a <code><span></code>.</p> <div class="second"> <span>Span!</span> <span>Span</span> <em>This is an `em`.</em> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> </div> <br> <h3><code>span:nth-of-type(2n+1)</code>, WITH an <code><em></code> among the child elements.</h3> <p>Children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code><em></code>, not a <code><span></code>, and <code>nth-of-type</code> only selects children of that type. The <code><em></code> is completely skipped over and ignored.</p> <div class="third"> <span>Span!</span> <span>Span</span> <em>This is an `em`.</em> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> </div>
html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; }
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':nth-child' in that specification. | Working Draft | Adds of <selector> syntax and specifies that matching elements are not required to have a parent. |
Selectors Level 3 The definition of ':nth-child' 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 |
of <selector> syntax |
No | ? | No
|
? | ? | 9 |
Matches elements with no parent | 57 | ? | 52 | ? | 44 | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 4 | 9.5
|
3.1 | Yes |
of <selector> syntax |
? | ? | ? | No
|
? | 9 | No |
Matches elements with no parent | 57 | 57 | ? | 52 | 44 | ? | 7.0 |
© 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-child