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...

HTML
<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</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>&lt;em&gt;</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>&lt;span&gt;</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>&lt;em&gt;</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>&lt;em&gt;</code>, 
not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
 children of that type. The <code>&lt;em&gt;</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...

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  

CSS
: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 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.
  • 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 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.

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

CSS CSS Pseudo-class Layout Reference Web