: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

Browser compatibility

[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

• :nth-of-type
• :first-child
• :last-child