Codectionary / Developer documentation / CSS

Structural Pseudo-classes: nth-child()

Structural pseudo-classes select elements based on their position among siblings, without needing extra classes. :first-child and :last-child match the first/last element. :nth-child() accepts a formula (like 2n for even, 2n+1 for odd) or a simple number, letting you target patterns like every third item or striped table rows.

Syntax

:first-child, :last-child, :nth-child(formula)

Examples

first-child, last-child, and a Specific Position

Targeting elements by their fixed position among siblings.

/* Demo setup: sizing, structure or neutral surfaces. */
li{border-bottom:1px solid #94a3b8;padding:.5rem}

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(3) { color: red; } /* the exact third item */
  1. Four list items make first, last and third positions distinct.
  2. The relevant pseudo-classes select positions among element siblings.
  3. Add a new item and observe which elements now match each position.
HTML used by this example
<ol><li>Read</li><li>Run</li><li>Explain</li><li>Review</li></ol>

nth-child() Formulas for Patterns

Striped rows and other repeating patterns using the an+b formula.

/* Demo setup: sizing, structure or neutral surfaces. */
table{border-collapse:collapse;color:#172b4d}td,th{padding:.75rem;border:1px solid #94a3b8}

tr:nth-child(even) { background: #f9fafb; }  /* zebra striping */
tr:nth-child(odd) { background: white; }

li:nth-child(3n) { margin-right: 0; } /* every 3rd item, e.g. for a 3-column grid */
li:nth-child(n + 4) { display: none; } /* hide everything from the 4th item onward */
  1. The table has enough rows for alternating striping to be visible.
  2. The six-item list lets 3n match the third and sixth positions.
  3. Structural selectors follow sibling positions, not the wording of the content.
HTML used by this example
<table><caption>Lesson progress</caption><tbody><tr><th scope="row">HTML</th><td>1 exercises</td></tr><tr><th scope="row">CSS</th><td>2 exercises</td></tr><tr><th scope="row">JavaScript</th><td>3 exercises</td></tr><tr><th scope="row">TypeScript</th><td>4 exercises</td></tr></tbody></table><ol><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li></ol>

Parameters and values

  • :first-child / :last-child (pseudo-class): Matches if the element is the first/last among its siblings
  • :nth-child(n) (pseudo-class): Matches based on a formula or specific position among siblings
  • :nth-of-type(n) (pseudo-class): Like nth-child, but only counts siblings of the same element type
  • :only-child (pseudo-class): Matches an element with no siblings at all

Best practices

  • Use :nth-child(even)/:nth-child(odd) for striped table rows or lists instead of manually adding alternating classes
  • Use :nth-of-type() instead of :nth-child() when other, different element types are mixed in among the siblings you are targeting
  • Combine :nth-child() with the general an+b formula for advanced patterns, like hiding all items after a certain position for a "show more" pattern
  • Remember these pseudo-classes count ALL sibling elements, not just ones matching your selector, unless you specifically use the :of-type variants

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading