CSSmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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

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

Need a hint?

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

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


  
    /* Add CSS for li padding and font size here */
  



  Apple
  Banana
  Cherry
  Date
  Elderberry
  Fig

Need a hint?

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

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


  
    li {
      padding: 0.5rem;
      font-size: 1.2rem;
    }
    /* Add nth-child selector rule here */
  



  Apple
  Banana
  Cherry
  Date
  Elderberry
  Fig

Need a hint?

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

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




  
  
  
    li {
      padding: 0.5rem;
      font-size: 1.2rem;
    }
    li:nth-child(3n) {
      background-color: #d4edda;
    }

Need a hint?

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