How to Use nth-child in CSS

Use :nth-child() when you want to style elements based on their position inside a parent. This works especially well for zebra-striped tables, alternating cards, gallery layouts, and repeated UI patterns.

What you’ll build or solve

You’ll learn how to use nth-child in CSS to target specific positions and repeating patterns. You’ll also know how to style every second, third, or custom-positioned element.

When this approach works best

This approach is the right choice when repeated elements need visual rhythm without adding extra classes.

Common real-world scenarios include:

• Zebra-striped tables
• Alternating card colors
• Every third gallery item
• Pricing plans with featured positions
• Grid rhythm patterns

This is a bad idea when elements are reordered dynamically and the visual meaning depends on specific content instead of position.

Prerequisites

You only need:

• A repeated HTML structure like list items, cards, or table rows
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Target elements by position with :nth-child()

Start with the most common pattern, every second element.

<ul class="plans">
  <li>USA</li>
  <li>UK</li>
  <li>France</li>
  <li>Germany</li>
</ul>

<style>
  .plans li:nth-child(2n) {
    background: #f5f5f5;
  }
</style>

You can also target exact positions.

<style>
  .plans li:nth-child(3) {
    font-weight: bold;
  }
</style>

What to look for:

• 2n means every second item
• 3n means every third item
• A plain number targets one exact position
• Works best on repeated siblings
• Great for visual rhythm without extra classes

Examples you can copy

Zebra table rows

<table class="metrics">
  <tr><td>USA</td></tr>
  <tr><td>UK</td></tr>
  <tr><td>France</td></tr>
</table>

<style>
  .metrics tr:nth-child(even) {
    background: #fafafa;
  }
</style>

Every third card

<div class="cards">
  <div>USA</div>
  <div>UK</div>
  <div>France</div>
</div>

<style>
  .cards div:nth-child(3n) {
    border: 2px solid #0057ff;
  }
</style>

Highlight featured plan

<ul class="pricing">
  <li>Starter</li>
  <li>Pro</li>
  <li>Enterprise</li>
</ul>

<style>
  .pricing li:nth-child(2) {
    background: #eef4ff;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Targeting the wrong parent level

What the reader might do:

.cards:nth-child(2n) {
  background: #f5f5f5;
}

Why it breaks: this targets the container itself instead of the repeated child elements.

Corrected approach:

.cards div:nth-child(2n) {
  background: #f5f5f5;
}

Mistake 2: Using nth-child on mixed element types unexpectedly

What the reader might do:

.container :nth-child(2) {
  color: red;
}

Why it breaks: the second child may not be the expected element type.

Corrected approach:

.container p:nth-child(2) {
  color: red;
}

Use a specific element selector whenever structure matters.

Mistake 3: Using position-based styling for semantic meaning

What the reader might do:

.pricing li:nth-child(2) {
  background: blue;
}

Why it breaks: if the order changes, the wrong item becomes featured.

Corrected approach:

Use a dedicated class like .featured when the style depends on meaning, not position.

Troubleshooting

If the wrong item styles, check the exact child structure in the HTML.

If alternating patterns skip unexpectedly, confirm all target items are siblings.

If dynamic sorting changes the result, use semantic classes instead.

If zebra striping starts on the wrong row, switch between odd and even.

Quick recap

• Use :nth-child() for position-based styling
• 2n targets every second item
• Exact numbers target fixed positions
• Great for repeated UI patterns
• Use classes when meaning matters more than position