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.

Syntax

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

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.

Odd Selector Example

    <div>
      <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>
    </div>

    span:nth-child(2n+1) {
      background-color: lime;
    }

Compatibility

Desktop browsers

Mobile browsers