:nth-child() Pseudo-Class

CSS :nth-child() Pseudo-Class

The CSS :nth-child() pseudo-class selects elements according to their position among the children of a parent. It can select one specific position, odd or even positions, or repeating patterns using a formula.

The :nth-child() Pseudo-Class

The :nth-child() pseudo-class uses a value inside its parentheses to determine which child positions should match.

li:nth-child(2) {
  color: #0088cc;
}

The selector li:nth-child(2) matches an <li> element when that element is the second child of its parent.

Selecting a Specific Position

A positive integer can be used to select an element at one specific position. Counting begins with the first child at position 1.

li:nth-child(3) {
  font-weight: bold;
}

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>SVG</li>
</ul>

The third list item is selected because it occupies position 3 among the children of the <ul>.

Selecting Odd and Even Positions

The keywords odd and even make it easy to select alternating child positions.

li:nth-child(odd) {
  background-color: #f5f5f5;
}

li:nth-child(even) {
  background-color: #eeeeee;
}

odd selects positions 1, 3, 5, and so on, while even selects positions 2, 4, 6, and so on. This technique is commonly used for alternating rows or items.

Using an+b Formulas

The :nth-child() pseudo-class can also use a formula in the form an+b. The formula creates a repeating sequence of child positions.

li:nth-child(2n) {
  color: #0088cc;
}

In 2n, the browser substitutes whole-number values for n, producing positions 2, 4, 6, 8, and so on. This is equivalent to selecting the even positions.

li:nth-child(2n+1) {
  color: #0088cc;
}

The formula 2n+1 produces positions 1, 3, 5, 7, and so on, which is equivalent to selecting the odd positions.

Common :nth-child() Patterns

Different values and formulas can select useful positional patterns.

The live example below uses 2n to select every second list item. Open it in the editor and try replacing 2n with odd, even, 3, 3n, or 3n+1.

The Parent and Position Matter

A selector such as p:nth-child(2) does not mean "the second paragraph." It means "a paragraph that is the second element child of its parent."

<section>
  <h2>Heading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</section>

p:nth-child(2) {
  color: #0088cc;
}

The first paragraph matches because it is the second element child of the <section>. The heading occupies position 1, the first paragraph occupies position 2, and the second paragraph occupies position 3.

This is the same structural idea introduced with :first-child and :last-child: the position is determined among the element's siblings within its parent.

:nth-child() vs :first-child and :last-child

These structural pseudo-classes all select elements according to their position among a parent's children, but they serve different purposes.

Use :first-child or :last-child when only an endpoint is needed. Use :nth-child() when you need a numbered position or repeating pattern.

When to Use :nth-child()

Use :nth-child() when elements should be styled according to their positions within a parent. Common uses include alternating row styles, highlighting a particular item, selecting every second or third element, and creating repeating visual patterns without adding classes to individual elements.

Because the selector depends on document structure, adding, removing, or rearranging sibling elements can change which elements match.

Summary

The CSS :nth-child() pseudo-class selects elements according to their positions among the children of a parent. It can select a specific position with a number, alternating positions with odd or even, or repeating patterns with formulas such as 2n and 3n+1.

The next tutorial covers the :not() pseudo-class, which selects elements that do not match a specified selector.