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

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 */

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 */

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 */
  }

Hint

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

Practice

1. What does the CSS child selector > do?

easy

A. Selects all descendants of an element

B. Selects only direct child elements of a parent

C. Selects sibling elements

D. Selects elements by their class name

Solution

1. Step 1: Understand selector types

   The child selector > targets only elements that are direct children of a specified parent.

2. Step 2: Compare with other selectors

   Unlike the descendant selector (space), it does not select nested grandchildren or deeper descendants.

3. Final Answer:

   Selects only direct child elements of a parent -> Option B

4. Quick Check:

   Child selector = direct children only [OK]

Hint: Child selector targets only immediate children, not deeper descendants [OK]

Common Mistakes:

• Confusing child selector with descendant selector
• Thinking it selects siblings
• Assuming it selects all nested elements

2. Which of the following is the correct syntax to select only <li> elements that are direct children of a <ul>?

easy

A. ul > li

B. ul + li

C. ul li

D. ul ~ li

Solution

1. Step 1: Identify the child selector syntax

   The child selector uses the > symbol between parent and child tags.

2. Step 2: Match syntax to question

   To select <li> elements directly inside <ul>, use ul > li.

3. Final Answer:

   ul > li -> Option A

4. Quick Check:

   Correct child selector syntax = ul > li [OK]

Hint: Use > between parent and child tags for direct child selection [OK]

Common Mistakes:

• Using space instead of > selects all descendants
• Using + or ~ which select siblings, not children
• Missing the > symbol

3. Given this HTML:

<div>
  <p>First</p>
  <section>
    <p>Second</p>
  </section>
</div>

And this CSS:

div > p { color: red; }

Which <p> elements will be red?

medium

A. Only 'Second' paragraph

B. Both 'First' and 'Second' paragraphs

C. Only 'First' paragraph

D. No paragraphs will be red

Solution

1. Step 1: Identify direct children of <div>

   The first <p> with text 'First' is a direct child of <div>.

2. Step 2: Check nested <p> inside <section>

   The second <p> with text 'Second' is inside <section>, which is a child of <div>, so it is a grandchild, not direct child.

3. Final Answer:

   Only 'First' paragraph -> Option C

4. Quick Check:

   Child selector affects direct children only [OK]

Hint: Only immediate children match > selector, nested deeper do not [OK]

Common Mistakes:

• Assuming all nested elements are selected
• Ignoring the nesting inside <section>
• Confusing descendant selector with child selector

4. This CSS code is intended to color only direct <li> children of <ol> blue:

ol > li { color: blue }

But it colors all <li> elements inside nested <ol> too. What is the problem?

medium

A. CSS does not support child selectors

B. The selector should be ol li instead

C. Missing semicolon after color property

D. Nested <ol> inside <li> causes deeper <li> to be direct children of inner ol

Solution

1. Step 1: Understand nested lists structure

   Nested <ol> inside <li> creates new direct children <li> for the inner ol.

2. Step 2: Explain why all <li> get colored

   The selector ol > li matches direct children of any ol, including nested ones, so all nested li get colored.

3. Final Answer:

   Nested <ol> inside <li> causes deeper <li> to be direct children of inner ol -> Option D

4. Quick Check:

   Child selector matches direct children of each ol, including nested [OK]

Hint: Nested ol creates new direct children li for inner ol [OK]

Common Mistakes:

• Thinking child selector ignores nested ol
• Confusing semicolon error with selector issue
• Believing CSS lacks child selector support

5. You want to style only the <span> elements that are direct children of <div class='container'>, but not <span> inside nested elements. Which CSS selector achieves this?

hard

A. .container > span

B. .container ~ span

C. .container + span

D. .container span

Solution

1. Step 1: Understand the requirement

   Only <span> elements directly inside <div class='container'> should be styled, excluding nested spans.

2. Step 2: Choose correct selector

   The child selector > selects direct children only, so .container > span matches only spans directly inside the container div.

3. Final Answer:

   .container > span -> Option A

4. Quick Check:

   Child selector > selects direct children only [OK]

Hint: Use > after parent class to select direct child elements only [OK]

Common Mistakes:

• Using space selects all descendants, not just direct children
• Using + or ~ selects siblings, not children
• Missing the > symbol