Bird
Raised Fist0
CSSmarkup~30 mins

Nth-child selector in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Styling List Items Using the Nth-child Selector
📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to make every third fruit in the list appear with a different background color to make it stand out.
🎯 Goal: Build a webpage with a list of fruits and use the CSS nth-child selector to color every third item in the list with a light green background.
📋 What You'll Learn
Create an HTML unordered list with exactly six fruit names as list items.
Add a CSS rule using the nth-child(3n) selector to style every third list item.
Set the background color of every third list item to #d4edda (a light green).
Ensure the page uses semantic HTML and the CSS is properly linked or embedded.
💡 Why This Matters
🌍 Real World
Using the nth-child selector helps highlight specific items in lists or tables, making content easier to scan and visually appealing.
💼 Career
Web developers often use nth-child selectors to style repeating patterns in lists, menus, or grids without adding extra classes or IDs.
Progress0 / 4 steps
1
Create the HTML list of fruits
Create an HTML file with a <ul> element containing exactly six <li> items. The items should be: Apple, Banana, Cherry, Date, Elderberry, and Fig.
CSS
Hint

Use the <ul> tag for the list and add six <li> tags inside it, each with one fruit name.

2
Add a CSS style block
Add a <style> block inside the <head> section of your HTML file. Inside it, create a CSS rule for the li elements that sets their padding to 0.5rem and font size to 1.2rem.
CSS
Hint

Use a <style> tag inside <head>. Then write a CSS rule for li to add padding and font size.

3
Use the nth-child selector to style every third item
Inside the existing <style> block, add a CSS rule using li:nth-child(3n) to set the background color to #d4edda for every third list item.
CSS
Hint

Use the selector li:nth-child(3n) to target every third list item and set its background color.

4
Add semantic HTML structure
Wrap the <ul> list inside a <main> element and add a <header> with a heading <h1> that says Fruit List. Ensure the <html> element has the attribute lang="en" and include the <meta charset="UTF-8"> and viewport meta tags inside <head>.
CSS
Hint

Use semantic tags like <header> and <main>. Add the required meta tags inside <head> and set lang="en" on <html>.

Practice

(1/5)
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