:nth-child

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.

/* Selects every fourth child element inside the body */
/* regardless of element type */
body :nth-child(4n) {
  background-color: lime;
}

Some notes:

  • 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 Added of <selector> syntax and noted that 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[1] 3.1
of <selector> syntax No support ? No support[2] ? ? ?
No parent required 57 ? 51 (51)[3] ? 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)[2] 9.0 9.5[1] 3.1
of <selector> syntax No support ? ? No support[2] ? ? ?
No parent required 57 57 ? 51.0 (51)[3] ? 44 ?

[1] Opera can't handle dynamic insertion of elements.

[2] Gecko doesn't implement this feature yet. See bug 854148.

[3] See bug 1300374.

See also

Document Tags and Contributors

 Last updated by: chrisdavidmills,