Child selector in CSS - Mini Project: Build & Apply

Styling Direct Child Elements with the Child Selector

📖 Scenario: You are creating a simple webpage with a list of fruits inside a container. You want to style only the direct child <li> elements of the container differently from nested lists.

🎯 Goal: Build a webpage where only the direct child <li> elements of a <ul> inside a container have a blue background, while nested <li> elements remain unstyled.

📋 What You'll Learn

Create a container <div> with class fruit-list containing a <ul> with some <li> items.

Add a nested <ul> inside one of the <li> items with its own <li> children.

Use the CSS child selector > to style only the direct child <li> elements of the .fruit-list > ul with a blue background.

Ensure nested <li> elements inside the nested <ul> are not styled with the blue background.

💡 Why This Matters

🌍 Real World

Websites often have nested menus or lists. Using the child selector helps style only the top-level items without affecting nested ones.

💼 Career

Understanding CSS selectors like the child selector is essential for front-end developers to create clean, maintainable, and accessible web designs.

1

Create the HTML structure with a container and a list

Create a <div> with class fruit-list. Inside it, add a <ul> with three <li> items: Apple, Banana, and Cherry. Inside the Banana <li>, add a nested <ul> with two <li> items: Yellow Banana and Green Banana.

CSS

Need a hint?

Remember to nest the second <ul> inside the Banana <li>.

2

Add a CSS selector variable for the container

Create a CSS rule targeting the .fruit-list > ul selector and set a variable --direct-child-bg to blue inside it.

CSS

  
    Apple
    Banana
      
        Yellow Banana
        Green Banana
      
    
    Cherry
  



  /* Your code here */

Need a hint?

Use the child selector > to target only the direct <ul> inside .fruit-list.

3

Use the child selector to style direct <li> children

Add a CSS rule using the selector .fruit-list > ul > li to set the background-color property to the variable var(--direct-child-bg).

CSS

  
    Apple
    Banana
      
        Yellow Banana
        Green Banana
      
    
    Cherry
  



  .fruit-list > ul {
    --direct-child-bg: blue;
  }
  /* Your code here */

Need a hint?

Use the child selector twice to style only the direct <li> children of the <ul>.

4

Add padding and text color for better visibility

Add CSS properties padding: 0.5rem 1rem; and color: white; to the .fruit-list > ul > li rule to make the blue background stand out and text readable.

CSS

  
    Apple
    Banana
      
        Yellow Banana
        Green Banana
      
    
    Cherry
  



  .fruit-list > ul {
    --direct-child-bg: blue;
  }
  .fruit-list > ul > li {
    background-color: var(--direct-child-bg);
    /* Your code here */
  }

Need a hint?

Adding padding and white text color helps the blue background look nice and readable.