CSS - :nth-child
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.
Examples
Example selectors
tr:nth-child(2n+1)
- Represents the odd rows of an HTML table.
tr:nth-child(odd)
- Represents the odd rows of an HTML table.
tr:nth-child(2n)
- Represents the even rows of an HTML table.
tr:nth-child(even)
- Represents the even rows of an HTML table.
span:nth-child(0n+1)
- Represents a span element which is the first child of its parent; this is the same as the
:first-child
selector. span:nth-child(1)
- Equivalent to the above.
span:nth-child(-n+3)
- Matches if the element is one of the first three children of its parent and also a span.
Full example
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:
Syntax
:nth-child( <a href="css/:nth-child#an-plus-b"><an-plus-b></a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> of <selector><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> ) <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a> <var>style properties</var> <a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a><p>where <br><code><an-plus-b> = <var>A</var>n<a href="css/value_definition_syntax#plus_(.2b)" title="Plus">+</a><var>B</var> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> even <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> odd</code></p>
Description
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 simplyn
, would match every child element.n
does not match on Android Browser 4.3 and below whereas1n
does.1n
does the same thing as1n+0
. Feel free to use whichever looks better.- 2n+0, or simply 2n, would match child elements 2, 4, 6, 8, etc. You can substitute the keyword
even
for this expression. 2n+1
would match child elements 1, 3, 5, 7, etc. You can substitute the keywordodd
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.
Browser Compatibility
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 |
Notes
- Opera can't handle dynamic insertion of elements.
See Also
Specifications
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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:nth-child