Nth-Child Selectors for Pattern-Based Styling

If you've ever wanted every second row in a table to be shaded, or every third card in a grid to stand out, you're in the right place. In this guide, you’ll learn how to use CSS :nth-child() selectors to create simple, repeatable patterns—without adding extra classes to every element.

You don’t need any coding experience. We’ll go step by step, look at small examples, and focus on what you can do right away.

What is `:nth-child()`?

In CSS (the code that controls how websites look), a selector tells the browser which elements to style. The :nth-child() pseudo-class selector is a special tool that lets you choose elements based on their position in a list.

For example, in a list of items:

The first item is child 1
The second item is child 2
The third item is child 3

…and so on.

With :nth-child(), you can style:

Just the 3rd item
Every 2nd item (2nd, 4th, 6th…)
Every 3rd item (3rd, 6th, 9th…)
Or more complex patterns

You write it like this:

selector:nth-child(pattern) {
  /* your styles here */
}

Don’t worry about the word “pattern” yet. We’ll build up from simple to more interesting examples.

Example 1: Styling Every Other Row in a Table

Let’s start with a classic pattern: zebra stripes in a table. This makes tables easier to read.

HTML

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>

This creates a simple table with 4 rows. Now let’s style every even (2nd, 4th, 6th…) row.

CSS

/* Style the table to make it visible */
table {
  border-collapse: collapse;          /* Remove gaps between cell borders */
  width: 300px;                       /* Set a width so we can see it clearly */
}

td {
  border: 1px solid #ccc;            /* Light grey border around each cell */
  padding: 8px;                      /* Space inside each cell */
}

/* Style every even row: 2nd, 4th, 6th, ... */
tr:nth-child(even) {
  background-color: #f2f2f2;         /* Light grey background */
}

What’s happening?

tr selects each row in the table.
nth-child(even) means: apply this style to the 2nd, 4th, 6th… rows.
The odd rows keep the default background color.

Expected result: You’ll see a table where rows 2 and 4 have a light grey background, and rows 1 and 3 are white.

Try it yourself: Change even to odd and see what happens.

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

Now rows 1 and 3 will be shaded instead.

Understanding the Pattern: `an + b`

So far we used words (even, odd). :nth-child() can also use a simple math formula: an + b.

a = how often the pattern repeats (the step)
n = just means “every time we go to the next child”
b = where to start

Common examples:

2n → every 2nd element (2, 4, 6…)
2n + 1 → every 2nd element starting at 1 (1, 3, 5…)
3n → every 3rd element (3, 6, 9…)
3n + 2 → elements 2, 5, 8, 11…

You don’t need to fully understand the math right away. It’s enough to know: change a to control the gap and b to control the starting position.

Example 2: Highlight Every Third Item in a List

Let’s work with a list of items, like navigation links or product names. We’ll highlight every 3rd item.

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

CSS

/* Make the list easy to see */
ul {
  list-style: none;                     /* Remove bullets */
  padding: 0;                           /* Remove default padding */
}

li {
  padding: 6px 10px;                    /* Space inside each item */
  border-bottom: 1px solid #ddd;        /* Line between items */
}

/* Highlight every 3rd item: 3rd, 6th, 9th, ... */
li:nth-child(3n) {
  background-color: #e0f7fa;            /* Light teal background */
  font-weight: bold;                    /* Make the text bold */
}

What’s happening?

li selects each list item.
nth-child(3n) means: starting from the 3rd item, select every 3rd one.
In our list, items 3 and 6 will be highlighted.

Try it yourself:

Change 3n to 4n and see how the pattern changes.
Add more <li> items and see which ones get the special style.

This is how you can create repeating patterns without adding a special class to every item.

Example 3: Alternating Card Styles in a Grid

Now let’s do something more visual: styling cards in a grid. We’ll alternate background colors to create a simple pattern.

HTML

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
</div>

CSS

/* Basic grid layout */
.card-grid {
  display: grid;                      /* Turn into a grid */
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 10px;                          /* Space between cards */
}

.card {
  padding: 20px;                      /* Space inside the card */
  border-radius: 6px;                 /* Rounded corners */
  text-align: center;                 /* Center the text */
  background-color: #f9f9f9;          /* Default light grey */
}

/* Make every even card blue-ish */
.card:nth-child(even) {
  background-color: #e3f2fd;          /* Light blue */
}

/* Make every 3rd card stand out more */
.card:nth-child(3n) {
  background-color: #bbdefb;          /* Slightly darker blue */
  font-weight: bold;                  /* Bold text */
}

What’s happening?

.card-grid creates a 3-column grid.
.card styles all cards with a base look.
.card:nth-child(even) gives every 2nd card a light blue background.
.card:nth-child(3n) overrides that for every 3rd card, making it a bit darker and bold.

Expected result: You’ll see 6 cards in 2 rows. Some will be light grey, some light blue, and cards 3 and 6 a slightly darker blue and bold.

Try it yourself:

Remove the nth-child(even) rule and see how only the 3rd and 6th cards are different.
Change 3n to 3n + 1 and notice how the emphasized cards shift.

Example 4: Creating a Repeating Color Pattern

Let’s create a more interesting pattern for a list: red, yellow, blue… then repeat. This shows how you can layer multiple :nth-child() rules.

HTML

<ul class="pattern-list">
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
  <li>Step 4</li>
  <li>Step 5</li>
  <li>Step 6</li>
  <li>Step 7</li>
  <li>Step 8</li>
  <li>Step 9</li>
</ul>

CSS

.pattern-list {
  list-style: none;
  padding: 0;
  max-width: 200px;             /* Keep it compact */
}

.pattern-list li {
  padding: 8px 10px;
  color: white;                 /* White text so colors pop */
}

/* 1st, 4th, 7th, ... */
.pattern-list li:nth-child(3n + 1) {
  background-color: #f44336;    /* Red */
}

/* 2nd, 5th, 8th, ... */
.pattern-list li:nth-child(3n + 2) {
  background-color: #ffeb3b;    /* Yellow */
  color: #333;                  /* Dark text for contrast on yellow */
}

/* 3rd, 6th, 9th, ... */
.pattern-list li:nth-child(3n) {
  background-color: #2196f3;    /* Blue */
}

How the pattern works

3n + 1 matches items 1, 4, 7, 10…
3n + 2 matches items 2, 5, 8, 11…
3n matches items 3, 6, 9, 12…

So the colors repeat every 3 items: red, yellow, blue, red, yellow, blue…

Try it yourself: Add more <li> items and watch the pattern continue automatically. You don’t need to add any special classes—just more items.

Helpful Tips and Common Gotchas

Counting includes all children. nth-child() counts every child of the parent, not just the ones with a certain class. If the structure changes (you add another element), the pattern can shift.
Use browser dev tools. Right-click a page, choose “Inspect,” and you can see which elements match your nth-child() rules.
Start simple. Begin with even, odd, 2n, 3n, then move to an + b patterns when you’re comfortable.
Experiment safely. You can try all of this in a free online editor like CodePen, JSFiddle, or your browser’s “Inspect” tool.

Quick Recap and What’s Next

You’ve learned how to:

Use :nth-child() to select elements by position
Style every other row or item with even and odd
Use an + b patterns like 3n, 3n + 1, and 3n + 2 for more complex designs
Combine multiple :nth-child() rules to build repeating color patterns

These skills are powerful for styling lists, tables, and grids without cluttering your HTML with extra classes.

Next steps:

Try creating your own pattern: maybe highlight every 4th card, or create a rainbow list.
Mix :nth-child() with hover styles (like li:nth-child(2n):hover) to make interactive designs.

Every pattern you create is a win. Keep experimenting, keep breaking (and fixing) things, and you’ll get more comfortable with CSS pattern-based styling one small step at a time.

Mudzinga