CSS :nth-child Selectors: A Visual Guide

•3 min read
CodeCSSFrontendWeb Development

CSS :nth-child selectors allow developers to target elements based on their position within a parent container. This guide breaks down how they work and where they are most useful.

Why :nth-child Selectors Matter

Before CSS3, styling specific child elements required additional classes or complex selector combinations.1 The :nth-child pseudo-class simplifies this by enabling:

  • Selection based on element position within a parent
  • Alternating row styles (zebra striping)
  • Targeting specific elements without extra classes
  • Pattern-based styling for grids and lists

Examples

Basic :nth-child Selectors

:first-child

Selects the first element among a group of sibling elements

:last-child

Selects the last element among a group of sibling elements

Targeting Specific Positions

:nth-child(2)

Selects the second element among a group of sibling elements

:nth-child(odd)

Selects elements at odd positions: 1st, 3rd, 5th, etc.

:nth-child(even)

Selects elements at even positions: 2nd, 4th, 6th, etc.

Pattern-Based Selection

:nth-child(4n)

Selects every 4th element: 4th, 8th, 12th, 16th, etc.

Counting From the End

:nth-last-child(3)

Selects the third-to-last element among a group of siblings

:nth-last-child(2n)

Selects every second element counting from the end

Negative Selectors

:not(:first-child)

Selects all elements except the first child

:not(:last-child)

Selects all elements except the last child

The An+B Formula

The :nth-child() selector uses the formula An+B:

  • A is the step size
  • n is a counter starting at 0
  • B is the offset
:nth-child(2n)  /* Every 2nd element (even positions: 2, 4, 6, etc.) */
:nth-child(2n+1)  /* Every 2nd element, starting at the 1st (odd positions: 1, 3, 5, etc.) */
:nth-child(3n+2)  /* Positions: 2, 5, 8, 11... */

Practical Applications

Table Striping

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

Grid Layouts

.grid-item:nth-child(3n + 1) {
  grid-column: span 2;
}

Form Styling

input:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

input:last-child {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

Lists and Navigation

.nav-item:nth-child(4n) {
  margin-right: 0;
}

The of <selector> Syntax (CSS Selectors Level 4)

Modern browsers support a more refined of <selector> syntax that filters elements before applying :nth-child() logic.

li:nth-child(even of .highlighted) {
  background-color: yellow;
}

This selects every even .highlighted element while ignoring non-highlighted siblings.

:nth-of-type() vs. :nth-child()

  • :nth-child() counts all child elements, regardless of type.
  • :nth-of-type() counts only elements of the same tag type.2
/* Selects the 3rd <li>, even if it's the only <li> */
li:nth-child(3) {
  color: red;
}

/* Selects the 3rd <li>, but only counting <li> elements */
li:nth-of-type(3) {
  color: blue;
}

:nth-last-child() - Counting from the End

Like :nth-child(), but starts counting from the last element instead of the first.3

tr:nth-last-child(-n + 3) {
  background-color: pink; /* Styles last 3 rows */
}

Browser Support

:nth-child() is widely supported. The of <selector> syntax is only available in Chrome 105+, Firefox 113+, and Safari 15.4+.

CSS vs. JavaScript

While JavaScript can achieve similar results, CSS is more performant and declarative. Which one looks better?

tr:nth-child(odd) {
  background-color: #3b82f6;
}

vs

for (const [i, child] of [...parentElement.children].entries()) {
  if (i % 2 === 0) {
    child.style.backgroundColor = '#3b82f6'; // blue
  }
}

Final Thoughts

Utilizing :nth-child() and related selectors leads to cleaner, more maintainable styles without excessive class usage. If targeting elements by type, use :nth-of-type(). For counting from the end, :nth-last-child() is the way to go. For modern filtering, leverage of <selector> where supported.

References

Footnotes

  1. :nth-child() MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child ↩

  2. :nth-of-type() MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type ↩

  3. :nth-last-child() MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child ↩

φ