CSS :nth-child Selectors: A Visual Guide
CSS :nth-child selectors allow developers to target elements based on their position within a parent container. This guide breaks down how they work and where they are most useful.
Why :nth-child Selectors Matter
Before CSS3, styling specific child elements required additional classes or complex selector combinations.1 The :nth-child pseudo-class simplifies this by enabling:
- Selection based on element position within a parent
- Alternating row styles (zebra striping)
- Targeting specific elements without extra classes
- Pattern-based styling for grids and lists
Examples
Basic :nth-child Selectors
:first-child
Selects the first element among a group of sibling elements
:last-child
Selects the last element among a group of sibling elements
Targeting Specific Positions
:nth-child(2)
Selects the second element among a group of sibling elements
:nth-child(odd)
Selects elements at odd positions: 1st, 3rd, 5th, etc.
:nth-child(even)
Selects elements at even positions: 2nd, 4th, 6th, etc.
Pattern-Based Selection
:nth-child(4n)
Selects every 4th element: 4th, 8th, 12th, 16th, etc.
Counting From the End
:nth-last-child(3)
Selects the third-to-last element among a group of siblings
:nth-last-child(2n)
Selects every second element counting from the end
Negative Selectors
:not(:first-child)
Selects all elements except the first child
:not(:last-child)
Selects all elements except the last child
The An+B Formula
The :nth-child()
selector uses the formula An+B
:
A
is the step sizen
is a counter starting at 0B
is the offset
:nth-child(2n) /* Every 2nd element (even positions: 2, 4, 6, etc.) */
:nth-child(2n+1) /* Every 2nd element, starting at the 1st (odd positions: 1, 3, 5, etc.) */
:nth-child(3n+2) /* Positions: 2, 5, 8, 11... */
Practical Applications
Table Striping
tr:nth-child(odd) {
background-color: #f2f2f2;
}
Grid Layouts
.grid-item:nth-child(3n + 1) {
grid-column: span 2;
}
Form Styling
input:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
input:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
Lists and Navigation
.nav-item:nth-child(4n) {
margin-right: 0;
}
The of <selector>
Syntax (CSS Selectors Level 4)
Modern browsers support a more refined of <selector>
syntax that filters elements before applying :nth-child()
logic.
li:nth-child(even of .highlighted) {
background-color: yellow;
}
This selects every even .highlighted
element while ignoring non-highlighted siblings.
:nth-of-type()
vs. :nth-child()
:nth-child()
counts all child elements, regardless of type.:nth-of-type()
counts only elements of the same tag type.2
/* Selects the 3rd <li>, even if it's the only <li> */
li:nth-child(3) {
color: red;
}
/* Selects the 3rd <li>, but only counting <li> elements */
li:nth-of-type(3) {
color: blue;
}
:nth-last-child()
- Counting from the End
Like :nth-child()
, but starts counting from the last element instead of the first.3
tr:nth-last-child(-n + 3) {
background-color: pink; /* Styles last 3 rows */
}
Browser Support
:nth-child()
is widely supported. The of <selector>
syntax is only available in Chrome 105+, Firefox 113+, and Safari 15.4+.
CSS vs. JavaScript
While JavaScript can achieve similar results, CSS is more performant and declarative. Which one looks better?
tr:nth-child(odd) {
background-color: #3b82f6;
}
vs
for (const [i, child] of [...parentElement.children].entries()) {
if (i % 2 === 0) {
child.style.backgroundColor = '#3b82f6'; // blue
}
}
Final Thoughts
Utilizing :nth-child()
and related selectors leads to cleaner, more maintainable styles without excessive class usage. If targeting elements by type, use :nth-of-type()
. For counting from the end, :nth-last-child()
is the way to go. For modern filtering, leverage of <selector>
where supported.
References
Footnotes
-
:nth-child()
MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child ↩ -
:nth-of-type()
MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type ↩ -
:nth-last-child()
MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child ↩