Nth-child selector in CSS - Browser Rendering Trace

Render Flow - Nth-child selector

[Parse CSS selector 'li:nth-child(2)'] -> [Match all <li> elements] -> [Check each <li> position in parent] -> [Apply styles to 2nd child only] -> [Repaint affected elements]

The browser reads the nth-child selector, finds all matching elements, checks their order among siblings, and applies styles only to those at the specified positions.

Render Steps - 2 Steps

Code Added:<ul> with 4 <li> items

Before

→

After

[ul]
 ├─ [li] Item 1
 ├─ [li] Item 2
 ├─ [li] Item 3
 └─ [li] Item 4

The unordered list with four list items appears in default black text.

🔧 Browser Action:Creates DOM tree and paints default list items

Code Sample

This code colors the second list item red and makes its text bold.

CSS

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

CSS

li:nth-child(2) {
  color: red;
  font-weight: bold;
}

Render Quiz - 3 Questions

After applying step 2, which list item is styled differently?

A The first list item

B All list items

C The second list item

D The last list item

Common Confusions - 2 Topics

Why doesn't nth-child(2) style the second <li> if there are other elements before it?

nth-child counts all types of elements, not just <li>. If another element like <p> is before the second <li>, nth-child(2) targets the second child overall, which may not be the second <li>.

💡 nth-child counts all siblings, not just matching tags.

Why does nth-child(odd) style the 1st, 3rd, 5th items and not just odd numbers in content?

nth-child(odd) counts the position of elements among siblings, so it styles elements in odd positions regardless of their content or text.

💡 nth-child counts element position, not content values.

Property Reference

Selector	What It Matches	Visual Effect	Common Use
li:nth-child(2)	Second <li> child of its parent	Styles only the second list item	Highlight specific list items
li:nth-child(odd)	All odd-numbered <li> children	Styles 1st, 3rd, 5th, etc.	Striped lists or alternating styles
li:nth-child(3n)	Every 3rd <li> child (3rd, 6th, 9th...)	Styles every third item	Patterned styling in lists
li:nth-child(1)	First <li> child of its parent	Styles only the first item	Special first item styling

Concept Snapshot

nth-child selector targets elements based on their position among siblings. Syntax: element:nth-child(n) where n can be a number, odd, even, or formula. Counts all element types, not just the selector tag. Commonly used for styling specific list items or patterns. Visual effect depends on the child's position in the parent container.