CSS :nth-child

Selecting Child Elements by Position

We’ll be taking a closer look at pseudo-selectors in a few classes.

A very useful selector is :nth-child() as it provides flexible ways to target elements based on their position in a set.

Options include:

• :nth-child(2)
  • We specify a specific “index”
  • Note that the “index” in this case starts with 1 (not 0 as in most programming languages).
• :nth-child(even) or :nth-child(odd)
• :nth-child(n+1)
  • selects every element after the first
• :nth-child(3n)
  • selects every third element