CSS :nth-child() Selector

What You’ll Learn

The :nth-child() pseudo-class targets elements by their position among siblings. It powers zebra stripes, grid patterns, and precise positional styling.

Introduction

The :nth-child() selector in CSS allows you to target elements based on their position within a parent element. This pseudo-class is extremely flexible, letting you style elements based on patterns or specific positions.

Whether you are working with tables, lists, or any repeated HTML structure, :nth-child() is a powerful tool for dynamic styling.

Definition and Usage

Write element:nth-child(n) where n is a number, the keyword odd or even, or a formula like 2n+1.

📝 Syntax

The syntax for the :nth-child() pseudo-class is:

element:nth-child(n) {
  /* CSS properties */
}

element is the tag you want to style. n can be a number, keyword, or an+b formula.

Common Patterns

The an+b Formula

• n is a counter starting at 0, increasing by 1 for each child.
• a is the step size — how often to select (e.g. every 2nd, every 3rd).
• b is the offset — the starting position in the sequence.

Related Selectors

• :nth-of-type() — counts only siblings of the same tag type
• :first-child / :last-child — shorthand for positions 1 and last
• :nth-last-child() — counts from the end of the sibling list
• :not() — combine for exclusions like li:not(:nth-child(1))

When to Use :nth-child()

:nth-child() is ideal for position-based patterns:

• Zebra striping — Alternate row colors with :nth-child(odd) or :nth-child(even).
• Highlight a position — Style the third item with :nth-child(3).
• Repeating patterns — Every third card with :nth-child(3n+1).
• Table rows — tr:nth-child(even) for readable data tables.
• Grid layouts — Clear every 4th item in a flex or grid row pattern.

Examples Gallery

Practice :nth-child() with zebra stripes, specific positions, formulas, and table row styling.

li:nth-child(2n) {
  background: #dbeafe;
}

li:nth-child(3) {
  font-weight: 700;
  color: #b91c1c;
}

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

/* Equivalent to :nth-child(2n+1) */

li:nth-child(3n+1) {
  background: #dcfce7;
  border-left: 4px solid #16a34a;
  padding-left: 0.65rem;
}

tr:nth-child(even) {
  background: #f8fafc;
}

tr:nth-child(1) {
  font-weight: 700;
  background: #1e293b;
  color: #fff;
}

💬 Usage Tips

• Use odd/even keywords — More readable than 2n+1 for simple striping.
• Combine selectors — ul li:nth-child(2) scopes to list items inside a ul.
• Test formulas — Plug n=0,1,2 into an+b to verify which positions match.
• Tables and grids — tr:nth-child(even) is the classic zebra table pattern.
• When type matters — Switch to :nth-of-type() if mixed tags break your count.

⚠️ Common Pitfalls

• Counts all children — A <div> before your <li> shifts the count; use :nth-of-type() if needed.
• 1-based, not 0-based — The first child is :nth-child(1), not 0.
• Complex formulas — Double-check a (step) and b (offset) in an+b expressions.
• p:nth-child(2) trap — Matches a p only if it is the second child overall, not the second paragraph.
• Overlapping rules — Multiple :nth-child() rules can apply to the same element; watch specificity.

♿ Accessibility

• Contrast on stripes — Alternating row colors must still meet WCAG contrast requirements.
• Do not rely on color alone — Pair zebra stripes with clear borders or labels where needed.
• Semantic tables — Use <th> for headers; :nth-child(1) on tr is not a substitute.
• Lists stay lists — Use proper <ul>/<ol> markup for screen readers.

💡 Best Practices