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.

Practice

1. What does the CSS selector li:nth-child(3) select?

easy

A. The third <li> element inside its parent

B. Every third <li> element in the whole document

C. The third child of any type inside the parent

D. All <li> elements except the third one

Solution

1. Step 1: Understand nth-child selector

   The nth-child(n) selector targets the element that is the nth child of its parent, counting all types of children.

2. Step 2: Apply to li:nth-child(3)

   This means it selects the li element only if it is the third child of its parent. It does not select the third li if other elements come before it.

3. Final Answer:

   The third child of any type inside the parent -> Option C

4. Quick Check:

   li:nth-child(3) = third child of any type [OK]

Hint: Selects element if it is nth child of parent, not nth of type [OK]

Common Mistakes:

• Thinking it selects the nth element of that type globally
• Confusing nth-child with nth-of-type selector
• Assuming it selects every nth element regardless of type

2. Which of the following is the correct syntax to select every even div inside a container using :nth-child?

easy

A. div:nth-child(2n+1)

B. div:nth-child(even)

C. div:nth-child(odd)

D. div:nth-child(2n-1)

Solution

1. Step 1: Recall even keyword meaning

   The keyword even in :nth-child(even) selects all even-numbered children (2nd, 4th, 6th, etc.).

2. Step 2: Match syntax to select even div elements

   Using div:nth-child(even) selects every div that is an even child of its parent.

3. Final Answer:

   div:nth-child(even) -> Option B

4. Quick Check:

   even = every 2nd child [OK]

Hint: Use 'even' keyword to select every 2nd child easily [OK]

Common Mistakes:

• Using odd instead of even
• Using formulas like 2n+1 which select odd children
• Confusing nth-child with nth-of-type

3. Given this HTML:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

And CSS:

li:nth-child(2n) { color: red; }

Which list items will appear red in the browser?

medium

A. Only Two

B. One, Three, and Five

C. All list items

D. Two and Four

Solution

1. Step 1: Understand 2n in nth-child

   The formula 2n selects every even child: 2nd, 4th, 6th, etc.

2. Step 2: Apply to the list items

   Items 2 (Two) and 4 (Four) are even children, so they get the red color.

3. Final Answer:

   Two and Four -> Option D

4. Quick Check:

   2n = even children = Two, Four [OK]

Hint: 2n selects even children: 2,4,6... [OK]

Common Mistakes:

• Thinking 2n selects odd children
• Confusing nth-child with nth-of-type
• Assuming all items get styled

4. What is wrong with this CSS if the goal is to color every 3rd p element blue?

p:nth-child(3n+1) {
  color: blue;
}

medium

A. It colors the 1st, 4th, 7th p, not every 3rd

B. Syntax error in the formula

C. It colors only the 3rd p element

D. It colors all p elements

Solution

1. Step 1: Analyze the formula 3n+1

   The formula 3n+1 selects children at positions 1, 4, 7, 10, ...

2. Step 2: Compare with the goal of every 3rd element

   Every 3rd element means positions 3, 6, 9, ... which is 3n, not 3n+1.

3. Final Answer:

   It colors the 1st, 4th, 7th <p>, not every 3rd -> Option A

4. Quick Check:

   3n+1 = 1,4,7... not every 3rd [OK]

Hint: Use 3n for every 3rd, not 3n+1 [OK]

Common Mistakes:

• Using 3n+1 instead of 3n for every 3rd child
• Confusing formula offsets
• Expecting 3n+1 to select 3rd, 6th, 9th

5. You want to style only the 2nd and 4th li elements inside a ul without styling the 6th or others. Which CSS selector achieves this?

hard

A. li:nth-child(2), li:nth-child(4)

B. li:nth-child(2n)

C. li:nth-child(2n+2)

D. li:nth-child(2n):not(:nth-child(6))

Solution

1. Step 1: Understand the goal

   We want to style only the 2nd and 4th li elements, excluding the 6th or any others.

2. Step 2: Evaluate each option

   li:nth-child(2n):not(:nth-child(6)) selects every even li except the 6th, but also includes 8th, 10th, etc. li:nth-child(2n) selects all even li elements (2nd, 4th, 6th, ...). li:nth-child(2n+2) selects 2nd, 4th, 6th, ... as well. li:nth-child(2), li:nth-child(4) explicitly selects only the 2nd and 4th li elements.

3. Final Answer:

   li:nth-child(2), li:nth-child(4) -> Option A

4. Quick Check:

   Explicitly list 2nd and 4th for exact selection [OK]

Hint: List exact children with commas for precise selection [OK]

Common Mistakes:

• Using formulas that select more than needed
• Trying to exclude with :not() but missing others
• Assuming 2n+2 excludes 6th child