The :nth-child(an+b)
CSS pseudo-class matches an element that has an+b-1
siblings before it in the document tree, for a given positive or zero value for n
, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.
Some examples:
1n+0
, or simply n
, would match every child element. n
does not match on Android Browser 4.3 and below whereas 1n
does. 1n
does the same thing as 1n+0
. Feel free to use whichever looks better.even
for this expression.2n+1
would match child elements 1, 3, 5, 7, etc. You can substitute the keyword odd
for this expression.3n+4
would match child elements 4, 7, 10, 13, etc.The values a
and b
must both be integers, and the index of an element's first child is 1. In other words, this class matches all children whose index fall in the set { an + b; n = 0, 1, 2, ... }.
A common use case is to match every other row in a table.
:nth-child( <an-plus-b> [ of <selector># ]? ) { style properties }where
<an-plus-b> = An+B | even | odd
tr:nth-child(2n+1)
tr:nth-child(odd)
tr:nth-child(2n)
tr:nth-child(even)
span:nth-child(0n+1)
:first-child
selector.span:nth-child(1)
span:nth-child(-n+3)
The following HTML...
<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code><em></code> inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p> <div class="first"> <span>This span is selected!</span> <span>This span is not. :(</span> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> <p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code><em></code> inside the child elements. Children 1, 5, and 7 are selected. 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>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> <p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code><em></code> inside the child elements. Children 1, 4, 6, and 8 are selected. 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>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div>
...using this CSS...
html { font-family: sans-serif; } span, div em { padding: 10px; 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; }
...will result in:
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':nth-child' in that specification. | Working Draft | No change. |
Selectors Level 3 The definition of ':nth-child' in that specification. | Recommendation | Initial definition. |
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 3.5 (1.9.1) | 9.0 | 9.5 | 3.1 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 | 1.0 (1.9.1) | 9.0 | 9.5 | 3.1 |
© 2005–2017 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