CSSmarkup~30 mins

First-child and last-child 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 :first-child and :last-child

📖 Scenario: You are creating a simple webpage that shows a list of fruits. You want to style the first fruit in the list with a green background and the last fruit with a red background. This helps users quickly see the start and end of the list.

🎯 Goal: Build an HTML page with a list of fruits and use CSS :first-child and :last-child selectors to color the first item green and the last item red.

📋 What You'll Learn

Create an unordered list with exactly these fruits in order: Apple, Banana, Cherry, Date, Elderberry

Add CSS to style the first list item with a green background using :first-child

Add CSS to style the last list item with a red background using :last-child

Use semantic HTML5 structure with <main> and <section>

Ensure the page is responsive and text is readable

💡 Why This Matters

🌍 Real World

Styling first and last items in lists is common in menus, navigation bars, and content lists to highlight important elements or create visual balance.

💼 Career

Understanding CSS pseudo-classes like :first-child and :last-child is essential for front-end developers to create polished, accessible, and user-friendly web pages.

Progress0 / 4 steps

Create the HTML list of fruits

Create a <main> section containing a <section> with an unordered list <ul>. Inside the list, add exactly these list items in order: Apple, Banana, Cherry, Date, and Elderberry.

CSS

Need a hint?

Use <li> tags inside the <ul> to list each fruit exactly as given.

Add a CSS block to start styling

Add a <style> block inside the <head> section of the HTML. Inside it, create a CSS rule for ul that sets font-family to Arial, sans-serif and font-size to 1.2rem.

CSS


  
    /* Add styles for ul here */
  



  
    
      Apple
      Banana
      Cherry
      Date
      Elderberry

Need a hint?

Put the CSS inside a <style> tag in the <head>. Target the ul element.

Style the first and last list items using :first-child and :last-child

Inside the existing <style> block, add CSS rules to style the first list item li:first-child with a green background color #90ee90 and the last list item li:last-child with a red background color #f08080. Also add padding: 0.5rem and border-radius: 0.3rem to both for better look.

CSS


  
    ul {
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
    }
    /* Add styles for first and last list items here */
  



  
    
      Apple
      Banana
      Cherry
      Date
      Elderberry

Need a hint?

Use li:first-child and li:last-child selectors to style the first and last list items respectively.

Add responsive and accessibility improvements

Add a meta tag inside the <head> for viewport with content width=device-width, initial-scale=1.0. Also add aria-label="Fruit list" to the <ul> for accessibility.

CSS


  
  
    ul {
      font-family: Arial, sans-serif;
      font-size: 1.2rem;
    }
    li:first-child {
      background-color: #90ee90;
      padding: 0.5rem;
      border-radius: 0.3rem;
    }
    li:last-child {
      background-color: #f08080;
      padding: 0.5rem;
      border-radius: 0.3rem;
    }
  



  
    
      Apple
      Banana
      Cherry
      Date
      Elderberry

Need a hint?

Add the viewport meta tag inside <head> for responsive design. Add aria-label="Fruit list" to the <ul> for screen readers.