Detailed explanation
The :nth-child() CSS pseudo-class selects an element according to its position among sibling elements under the same parent. Positions start at 1, not 0, and text nodes or comments do not affect the count. It is useful for alternating table rows, repeating card styles, or targeting particular list items without adding extra classes. For example, li:nth-child(2) selects an li only if it is the second element child of its parent.
The argument can be an integer, odd, even, or an An+B expression. Here, n takes non-negative integer values starting at 0, and only positive resulting positions can match. Thus, li:nth-child(2n) { background: #eee; } targets li elements at positions 2, 4, 6, and so on; even is equivalent to 2n. Similarly, li:nth-child(3n+1) { color: blue; } targets positions 1, 4, 7, and so on. The expression -n+3 selects positions 3, 2, and 1, so :nth-child(-n+3) matches the first three element children. Each parent has its own independent sibling count.
The crucial detail is that ordinary :nth-child() counts all sibling elements, not just those matching the selector before it. Suppose a parent contains <h2>, <p>, <p>, in that order. p:nth-child(2) selects the first paragraph because it is the second element child; p:nth-child(1) selects nothing because the first child is an h2. In contrast, p:nth-of-type(1) { font-weight: bold; } selects the first paragraph by counting only siblings with the same tag name. Interviewers often use mixed-element examples to test this distinction.
Modern CSS also supports an explicit filtering form: :nth-child(An+B of selector). For example, :nth-child(2 of .item) selects the second sibling matching .item, ignoring other siblings when calculating positions. This differs from .item:nth-child(2), which requires the second element child overall to have that class. These selectors follow DOM sibling order, not a visual order created by Flexbox or Grid. When explaining them, identify the parent, establish which siblings are counted, calculate positions, and then check which elements actually match.
Key points to remember
- Sibling positions are one-based; text nodes and comments are ignored.
- odd equals 2n+1, and even equals 2n.
- An+B generates candidate positions using n = 0, 1, 2, …; only positive positions match.
- Ordinary :nth-child() counts all element siblings; :nth-of-type() counts siblings of the same tag name.
- The optional 'of selector' syntax filters siblings before calculating positions.
Common mistakes candidates make
- Assuming li:nth-child(3) means the third li even when other element types occur before it.
- Using zero-based indexing or counting whitespace text nodes as children.
- Expecting Flexbox order or Grid placement to change which elements :nth-child() matches.
Likely follow-up questions
How do you select the first three or all elements from the fourth onward?
Use :nth-child(-n+3) for the first three element children and :nth-child(n+4) for the fourth onward. Adding a prefix such as li restricts matches to li elements without changing the ordinary sibling count.
How does :nth-last-child() differ from :nth-child()?
:nth-last-child() uses the same positional formulas but counts from the end of the sibling list. For example, li:nth-last-child(2) matches an li if it is the second-last element child.
Do hidden elements affect :nth-child() counting?
Yes, elements with display: none still participate because they remain in the DOM sibling list. If hidden elements have a known class or attribute, the 'of selector' form can explicitly exclude them; it does not automatically detect visibility.
Interview tip: Start with one-based sibling counting, demonstrate 2n and 3n+1, then use mixed tags to distinguish :nth-child() from :nth-of-type().