CSS :nth-child() Pseudo Class
The :nth-child() CSS pseudo-class is used for selecting and styling elements based on their index. Read about the pseudo-class and practice with examples.
The :nth-child() pseudo-class matches elements based on their position among a group of siblings. You hand it a number, a keyword, or a formula, and it selects the matching child or children — letting you style every other row of a table, the first three items of a list, or any repeating pattern without adding extra classes to your HTML.
This page covers the argument it accepts (odd, even, and the An+B formula), shows runnable examples, and explains the most common point of confusion: how :nth-child() differs from :nth-of-type().
Syntax
selector:nth-child(argument) {
/* declarations */
}The argument is one of three things:
- A single number, like
:nth-child(3)— matches the third child. - A keyword,
oddoreven. - An
An+Bformula, like:nth-child(3n+1).
Counting always starts at 1 for the first child (not 0), and it counts all siblings, not just the ones your selector type matches — that detail is the source of most surprises (see nth-child vs. nth-of-type).
Keyword values
odd
Matches elements in an odd position (1, 3, 5, 7, …). It is shorthand for the formula 2n+1.
even
Matches elements in an even position (2, 4, 6, 8, …). It is shorthand for the formula 2n.
odd and even are the workhorses for "zebra-striping" table rows or alternating list-item colors.
Functional notation: An+B
The formula An+B matches every element whose position satisfies it, where n runs through 0, 1, 2, 3, …:
Ais the cycle size (how many elements between matches).Bis the offset (where the cycle starts).
Walking through :nth-child(3n+1): substitute n = 0, 1, 2, … to get positions 1, 4, 7, 10, … — every third element starting from the first.
Other useful patterns:
| Formula | Matches positions | Meaning |
|---|---|---|
:nth-child(2n) | 2, 4, 6, … | Same as even |
:nth-child(2n+1) | 1, 3, 5, … | Same as odd |
:nth-child(3) | 3 only | A single fixed element |
:nth-child(n+4) | 4, 5, 6, … | Everything from the 4th onward |
:nth-child(-n+3) | 1, 2, 3 | Only the first three |
A and B must be integers. A negative A counts down, which is how -n+3 selects just the first three children.
Version
Examples
Selecting a single element
:nth-child() code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(3) {
background: #ccc;
}
</style>
</head>
<body>
<h2>:nth-child selector example</h2>
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</div>
</body>
</html>Only the third <p> gets a grey background.
Using the "odd" and "even" keywords
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:nth-child(odd) {
background: #1c87c9;
color: #eeeeee;
}
p:nth-child(even) {
background: #666666;
color: #eeeeee;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Using an An+B formula
This example uses :nth-child(3n) to highlight every third list item:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:nth-child(3n) {
background: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<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>
</body>
</html>Items 3 and 6 are highlighted, because 3n evaluates to 3 and 6.
nth-child vs. nth-of-type
This is the trap that catches most people. :nth-child() counts every sibling and then checks whether the matched element is also the right type. It does not count "the nth element of this type."
Consider this markup:
<div>
<h2>Heading</h2>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>Here p:nth-child(2) selects the first <p> — because the <p> sits in child position 2 (the <h2> is position 1). Writing p:nth-child(1) would match nothing at all, since position 1 is the heading, not a paragraph.
If you want "the second paragraph regardless of what comes before it," use :nth-of-type() instead, which counts only elements of the same type.
Related selectors
:nth-of-type()— like:nth-child()but counts only siblings of the same element type.:nth-last-child()— same formula syntax, but counts from the last sibling backward.:first-childand:last-child— shorthands for the first and last sibling.- CSS Selectors — overview of every selector type.