The nth-child pseudo-class in CSS

The CSS pseudo-class :nth-child allows you to select elements within a list of consecutive or non-consecutive tags; this pseudo-class uses a mathematical formula to determine the order.

For example, :nth-child(2n) selects all elements that are the second, fourth, sixth, and so on, child of their parent. You can also use numbers with an additional formula to select specific elements, such as :nth-child(4n + 1) to select the first element and every fourth element after that.

The pseudo-class :nth-child(); can be used to select any of the DOM elements like containers (div), lists, paragraphs, etc., found throughout the document. The only thing you need to specify is the 'n' value; below is a series of examples to understand how the :nth-child pseudo-class works in CSS.

The :nth-child() pseudo-class is one of those CSS tools that seem simple... until you start mixing tags, strange structures, and formulas. In this guide, I explain how it really works, how to avoid typical mistakes, and how to apply it in real layout design.

Additionally, I integrate my own experiences: more than once, I've been surprised when applying an :nth-child that "should work" but didn't because of the HTML structure.

What is the :nth-child pseudo-class and what is it for

The :nth-child() pseudo-class allows you to select an element based on its actual position within its parent. It doesn't look at the tag type (that's what :nth-of-type is for). It only cares about the place it occupies among its siblings: first, second, third, etc.

When I first tried it on a <ul> list, I realized how powerful it is: I could style the first <li>, the third, the fifth... without writing them one by one.

How the actual sibling count works in the DOM

Counting always starts at 1 (not 0).

• It counts all sibling elements.
• It doesn't matter if they are <p>, <li>, <div>, or <em>.
• If the third child is a <span> but your selector is li:nth-child(3), it won't select anything, because the third child IS NOT an <li>.

And it counts all children, not just those that match your selector.

For example:

<div>
 <span>1</span>
 <span>2</span>
 <em>3</em>
 <span>4</span>
</div>

If you apply:

span:nth-child(3)

It selects nothing, because child 3 is an <em>, not a <span>.

In my tests with mixed HTML, this is usually one of the most common mistakes.

Quick differences with :nth-of-type

• nth-child(n) → counts all children.
• nth-of-type(n) → counts only the children of the indicated type.

If your HTML has mixtures, :nth-of-type() usually causes fewer headaches.

Quick differences with :nth-of-type

• nth-child() → counts ALL elements → selects only if the type matches.
• nth-of-type() → counts ONLY those of the indicated type.

Example where everyone gets confused:

span:nth-child(2n+1)

If there is an <em> in the middle, the count continues counting that <em> even if it's not selected, offsetting the pattern.

:nth-child() Syntax Explained Simply

Exact number

:nth-child(4)

Selects the fourth child.

Useful for marking specific elements in short lists, like highlighting the first and third <li> (just like in your original example).

Odd and Even

The magical keywords:

:nth-child(odd)   /* 1,3,5,7... */
:nth-child(even)  /* 2,4,6,8... */

They are perfect for alternating styles without thinking about formulas.

I use them a lot for quick tables or long listings.

An+B Formula Without Pain

The An+B formula allows you to create repetitive patterns:

• A: interval
• n: counter that starts at 0
• B: offset

Useful Examples

• Selector    Meaning
• 2n    even (2,4,6…)
• 2n+1    odd (1,3,5…)
• 3n    every 3rd
• 3n+4    every 3rd starting at 4
• -n+3    first 3 elements

The CSS :nth-child pseudo-class to select two elements

For the following list:

<ul class="nth_numerica"> 
<li>First</li> 
<li>Second</li> 
<li>Third</li> 
<li>Fourth</li> 
<li>Fifth</li> 
<li>Sixth</li> 
<li>Seventh</li> 
</ul>

We will apply the following CSS rule using the :nth-child pseudo-class in CSS to change the background color to dark gray for the first and third element:

ul.nth_numerica li:nth-child(1), ul.nth_numerica li:nth-child(3) {    background: #999; }

Applying the above rule, we get the following result:

What happened?

We simply defined numerical values for 'n', to indicate the positions of the elements we want to select to apply the previous rule; for this example, 'n' had the values of one (nth-child(1)) and three (nth-child(3)) respectively.

The CSS :nth-child pseudo-class to select odd elements

What if you want something a little more generic? That is, if you want to apply certain rules to odd elements starting the count from one, for example to elements 1, 3, 5, 7 ... n without selecting the elements one by one.

For the following list:

<ul class="nth_formula"> 
<li>First</li> 
<li>Second</li> 
<li>Third</li> 
<li>Fourth</li> 
<li>Fifth</li> 
<li>Sixth</li> 
<li>Seventh</li> 
<li>Eighth</li> 
<li>Ninth</li> 
<li>Tenth</li> 
<li>Eleventh</li> 
<li>Twelfth</li> 
<li>Thirteenth</li> 
<li>Fifteenth</li> 
<li>Sixteenth</li>
<li>Seventeenth</li>
 </ul>

We will apply the following CSS rule:

ul.nth_formula li:nth-child(2n+1) {    background: #999; }

The result will be:

What happened?

The formula $2n+1$ (where for this example $A=2$ and $B=1$) is equivalent in some programming language to:

for(i = k; i < n; i+x){}

The CSS :nth-child pseudo-class and the odd and even values

Let's look at one last example, a bit more interesting and widely used; for the following table:

<table class="alternar"> 
<tr> 
	<td>Cell 1 1<td> 
	<td>Cell 1 2<td> 
</tr> 
<tr> 
	<td>Cell 2 1<td> 
	<td>Cell 2 2<td> 
</tr> <tr> 
	<td>Cell 3 1<td> 
	<td>Cell 3 2<td> 
</tr> 
</table>

We will apply the following rules:

table.alternar tr:nth-child(odd) {    background: #999; } table.alternar tr:nth-child(even) {    background: #CCC; }

Which also allow changing the background color of an element, in this case, of each of the table rows.

The result is the following:

The two words indicate which DOM elements the rule will apply to; for odd elements, the background color is #999, and for even elements, it is #CCC.

Various Examples

Alternating colors in lists

ul li:nth-child(odd) {
 background: #f5f5f5;
}
ul li:nth-child(even) {
 background: #e1e1e1;
}

When I first tried this, I realized I didn't need any :first-child or manual classes. Just with odd/even, the list looks clean.

Alternating table rows

Your classic example adapts like this:

table tr:nth-child(odd)  { background: #999; }
table tr:nth-child(even) { background: #CCC; }

This remains one of the simplest ways to improve data readability.

Selecting only some elements in grids or cards

.card:nth-child(3n) { transform: scale(1.05); }

Every 3rd card will receive a different style. Useful when you need to break the monotony in repetitive layouts.

How mixing tags influences selection

If your HTML is like this:

<li>1</li>
<li>2</li>
<div>OPS</div>
<li>3</li>

Then:

li:nth-child(3)

Does NOT select the third <li>; instead, it checks directly:

• → “Is the third child an <li>?”.
• → No. It's a <div>.
• → Result: it selects nothing.

Modern use: :nth-child(A of selector)

Little-explained novelty:

:nth-child(2 of .item)

Selects the second element that has the class `.item` even if there are other elements in between. Much more predictable.

nth-child vs nth-last-child :nth-last-child(1) /* equivalent to the last child */

Very useful when working with dynamically generated structures.

Common mistakes and how to avoid them

When :nth-child doesn't select what you expect

Typical causes:

• There are invisible elements (<script>, <template>).
• Tags are unintentionally mixed.
• The An+B pattern does not start where you think.

Typical mistakes with messy real HTML

If you inherit HTML where someone mixed <p>, <div>, and <span> without order, your pattern will be unpredictable.
The solution:

• use :nth-of-type(),
• clean up the HTML,
• or apply the new "of S" syntax.

Summary:

• When I use :nth-child(1), :nth-child(3) to mark specific elements, I do it the same way as in your numbered list example: straightforward and without mysteries.
• When I want odds, I use $2n+1$ as you mentioned; it's the most transparent way to "see" how the pattern progresses.
• For tables, odd/even remains my favorite combination. Just like in your dark gray background example, alternation greatly improves readability.

When selecting data ranges displayed—for example—in ul lists, it should be almost mandatory to highlight this user-selected region. This can be done very easily with a little CSS, and that is what we will show in this post.

Select ranges of elements with CSS

The nth-child selector to the rescue for selecting ranges

We have already talked about the selector or pseudo-class called nth-child in a previous post titled: THE NTH-CHILD PSEUDO-CLASS IN CSS; this selector allows you to select elements within a list of consecutive or non-consecutive tags.

ul li:nth-child(n+5):nth-child(-n+15) { background: #08B; }

And we get:

How does the previous CSS work?

If we look at the previous CSS in chunks, you will see how simple it is; first, all elements starting from list number five (5) are selected -5 to 20-:

ul li:nth-child(n+5){ background: #08B; }

From this selection range, another range is selected by using another nth-child selector on the group already selected with nth-child(-n+15); in this way, a region can be demarcated in a simple and efficient way.

FAQs

• What does :nth-child() actually select?
  • The Nth child within a parent, counting from 1 and counting all tag types.
• Are :nth-child and :nth-of-type the same?
  • No. The first counts all siblings. The second counts only those of the same type.
• Why is my :nth-child not working?
  • Because the actual position in the DOM does not match the type of element you are selecting.
• What does the An+B formula mean?
  • A pattern that repeats every A elements, offset by B positions.
• What happens if I mix tags within the same container?
  • Your pattern can break. Use :nth-of-type or clean up the HTML.

The following selector, the CSS pseudo-class :checked, selects form elements.