Summary

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it, where n is positive or zero. More simply stated, the selector matches elements whose numeric position in a series of siblings matches the pattern an+b.

Some examples:

  • 0n+3, or simply 3, matches the third element.
  • 1n+0, or simply n, matches every element. (Compatibility note: n does not match on Android Browser 4.3 and below whereas 1n does. 1n is equivalent to 1n+0. Feel free to use whichever looks better.)
  • 2n+0, or simply 2n, matches elements 2, 4, 6, 8, etc. You can substitute the keyword even for this expression.
  • 2n+1 matches elements 1, 3, 5, 7, etc. You can substitute the keyword odd for this expression.
  • 3n+4 matches 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 indexes fall in the set { an + b; n = 0, 1, 2, ... }.

Syntax

:nth-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

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

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:

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':nth-child' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 (Yes) 3.5 (1.9.1) 9.0 9.5 3.1
No parent required 57 ? ? ? 44 ?
Feature Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 1.0 (1.9.1) 9.0 9.5 3.1
No parent required 57 57 ? ? ? 44 ?

Notes

  • Opera can't handle dynamic insertion of elements.

See also

Document Tags and Contributors

 Last updated by: mfluehr,