nth-child property CSS Reference

Definition and Usage

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.

This can more clearly be described this way: the matching element is the bth child of an element after all its children have been split into groups of a elements each.

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

Among other things, this allows selectors to match every other row in a table.


element:nth-child(an + b) { style properties }


Example selectors

Represents the odd rows of an HTML table.
Represents the odd rows of an HTML table.
Represents the even rows of an HTML table.
Represents the even rows of an HTML table.
Represents a span element which is the first child of its parent; this is the same as the :first-child selector.
Equivalent to the above.
Matches if the element is one of the first three children of its parent and also a span.

Odd Selector Example

      <span>This span is limed!</span>
      <span>This span is not. :(</span>
      <em>This one is odd. </em>
      <span>Sadly, this one is not...</span>
      <span>But this one is!</span>
    span:nth-child(2n+1) {
      background-color: lime;


Desktop browsers

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1

Mobile browsers

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

Relative articles