What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
CSS :nth-child() selects an element by its 1-based position among all element children of the same parent. Its argument can specify a single position, an odd/even pattern, or an An+B sequence; the Level 4 of S form counts only siblings matching a selector.
How does :nth-child() count elements?
The count starts at 1 and includes every element child of the same parent, regardless of tag name. Text nodes and comments do not count. The selector also tests the element type or other conditions you put before the pseudo-class.
For example, p:nth-child(2) matches a paragraph only if it is the second element child. If the parent contains a heading followed by a paragraph, that paragraph is second and matches. If a paragraph is first and a heading second, neither matches.
This distinction matters in mixed-content containers: another element type still takes up a position even when the selector targets only paragraphs or list items.
#1 Best Overall
What can go inside the parentheses?
The argument describes the positions to select. A fixed integer selects one position; odd and even select repeating positions; and An+B describes a sequence calculated for non-negative integer values of n.
| Argument | Positions matched |
|---|---|
2 |
The second element child |
odd or 2n+1 |
1st, 3rd, 5th, and subsequent odd-numbered children |
even or 2n |
2nd, 4th, 6th, and subsequent even-numbered children |
5n |
5th, 10th, 15th, and subsequent multiples of five |
-n+3 |
1st, 2nd, and 3rd children |
n+7 |
7th child and every child after it |
The position list is 1-indexed. In 5n, n=0 yields position 0, which is not an element-child position; the first match is at n=1, or position 5. The W3C Selectors Level 4 specification explains the indexing rule in its description of :nth-child().
Rank #2
How do you select the first three children?
Use :nth-child(-n + 3) to match the first three element children, whatever their tag names. To apply a rule to all of them, use a broad selector such as:
.container > :nth-child(-n + 3) {
margin-block-start: 0;
}The child combinator (>) limits the selection to direct children of .container. Remove it if you intend to select matching descendants at any depth.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteHow does the of S form change the count?
The Level 4 syntax :nth-child(An+B of S) first filters the siblings to those matching selector S, then counts positions within that filtered set. This makes it useful when unrelated elements or list items should not affect the count.
li:nth-child(-n + 3 of .important) {
font-weight: bold;
}This selects the first three siblings that match .important, provided each is an li. For example, if important list items occur in overall child positions 2, 4, 6, and 8, this selector matches positions 2, 4, and 6.
Without of S, the counting happens across all element children. So li.important:nth-child(-n + 3) matches important list items only when they are among the first three element children overall. The two selectors answer different questions: “first three important items” versus “important items among the first three children.”
When should you use :nth-of-type() instead?
Use :nth-of-type() when the position should be counted among siblings of the same element type. For example, p:nth-of-type(odd) selects every other paragraph sibling, regardless of where other tags appear between them.
By contrast, p:nth-child(odd) counts all element siblings and then matches only paragraphs in odd-numbered overall positions. A paragraph can therefore be skipped because a heading, image, or other element occupies a position before it. For counting from the end of the sibling list, consider :nth-last-child().
Common patterns
- Stripe table rows:
tr:nth-child(odd)andtr:nth-child(even)alternate styles based on each row’s overall element-child position within its parent. - Style a specific position: Use an integer such as
:nth-child(4)when you need the fourth element child. - Style a repeating interval: Use an expression such as
:nth-child(3n)to select every third child, beginning with the third. - Limit a rule to an initial range: Use
:nth-child(-n + 3)for the first three children. - Count only matching siblings: Use
:nth-child(-n + 3 of li.important)for the first three important list items.
How to choose the right positional selector
- Use
:nth-child()when position means all element siblings under the same parent. - Use
:nth-of-type()when position means siblings with the same tag name. - Use
:nth-child(An+B of S)when only siblings matching selectorSshould count. - Use
:nth-last-child()when the position should be counted from the end.
The W3C specification and MDN document the of S syntax, but the sources cited here do not establish a complete current browser-by-browser support matrix. Check compatibility for your target browsers before relying on that form in a production interface.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
