Descendant selector in CSS - Mini Project: Build & Apply

Styling Nested Elements with Descendant Selector

📖 Scenario: You are creating a simple webpage with a list of articles. Each article has a title and some paragraphs inside a section. You want to style only the paragraphs inside the sections differently from other paragraphs on the page.

🎯 Goal: Use the CSS descendant selector to change the text color of all paragraphs inside <section> elements to blue, while keeping other paragraphs black.

📋 What You'll Learn

Create an HTML structure with a <main> element containing two <article> elements.

Each <article> should have a <h2> title and a <section> with two paragraphs.

Add one paragraph outside the <section> but inside the <article> to show difference.

Write CSS using the descendant selector to style only paragraphs inside <section> with blue text color.

Paragraphs outside <section> should remain black.

💡 Why This Matters

🌍 Real World

Webpages often have nested content where you want to style only specific parts, like paragraphs inside a section, differently from others. Descendant selectors help you do this cleanly.

💼 Career

Understanding CSS selectors like descendant selectors is essential for front-end web developers to create well-structured, maintainable, and visually appealing websites.

1

Create the HTML structure with articles and sections

Write the HTML code to create a <main> element containing two <article> elements. Each <article> should have a <h2> with the text 'Article 1' and 'Article 2' respectively. Inside each <article>, add a <section> with two <p> paragraphs containing any text you like. Also add one <p> paragraph directly inside the <article> but outside the <section> with any text.

CSS

Hint

Remember to nest the paragraphs inside the <section> and also add one paragraph outside the section but inside the article.

2

Add a CSS file link and base paragraph style

Add a <style> block inside the <head> of the HTML document. Inside it, write CSS to set all p elements to have color: black; as the base style.

CSS

  
    /* Set all paragraphs to black color */
    p {
      /* Your code here */
    }
  



  
    Article 1
    
      This is the first paragraph inside section of article 1.
      This is the second paragraph inside section of article 1.
    
    This paragraph is outside the section in article 1.
  
  
    Article 2
    
      This is the first paragraph inside section of article 2.
      This is the second paragraph inside section of article 2.
    
    This paragraph is outside the section in article 2.
  

Hint

Use the selector p and set color: black; inside the <style> block.

3

Use descendant selector to style paragraphs inside sections

Inside the existing <style> block, add a CSS rule using the descendant selector section p to set the text color of all paragraphs inside <section> elements to blue.

CSS

  
    p {
      color: black;
    }
    /* Add descendant selector for paragraphs inside sections */
    /* Your code here */
  



  
    Article 1
    
      This is the first paragraph inside section of article 1.
      This is the second paragraph inside section of article 1.
    
    This paragraph is outside the section in article 1.
  
  
    Article 2
    
      This is the first paragraph inside section of article 2.
      This is the second paragraph inside section of article 2.
    
    This paragraph is outside the section in article 2.
  

Hint

Use the selector section p and set color: blue; inside the <style> block.

4

Add semantic HTML structure with <html>, <head>, and <body>

Wrap the existing code inside a complete HTML5 document structure. Add the <!DOCTYPE html> declaration at the top. Include the <html lang="en"> root element, a <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Place the existing <style> block inside the <head>. Put the <main> content inside the <body> element.

CSS

  
  
    p {
      color: black;
    }
    section p {
      color: blue;
    }
  


  
    
      Article 1
      
        This is the first paragraph inside section of article 1.
        This is the second paragraph inside section of article 1.
      
      This paragraph is outside the section in article 1.
    
    
      Article 2
      
        This is the first paragraph inside section of article 2.
        This is the second paragraph inside section of article 2.
      
      This paragraph is outside the section in article 2.
    
  

Hint

Wrap your existing code inside the full HTML5 structure with <!DOCTYPE html>, <html>, <head>, and <body>. Add the required meta tags inside the head.

Practice

1. What does the CSS descendant selector div p do?

easy

A. Selects only <p> elements that are direct children of <div> elements.

B. Selects all <p> elements and <div> elements separately.

C. Selects all <div> elements that are inside <p> elements.

D. Selects all <p> elements inside any <div> elements, no matter how deep.

Solution

1. Step 1: Understand the descendant selector syntax

   The space between div and p means select p elements inside div elements at any depth.

2. Step 2: Differentiate from child selector

   The child selector uses > and selects only direct children, but here it's a space, so all nested p inside div are selected.

3. Final Answer:

   Selects all <p> elements inside any <div> elements, no matter how deep. -> Option D

4. Quick Check:

   Descendant selector = space = nested elements [OK]

Hint: Space means any nested element inside another [OK]

Common Mistakes:

• Confusing descendant selector with child selector
• Thinking it selects only direct children
• Mixing up order of selectors

2. Which of the following is the correct syntax for selecting all <span> elements inside <section> elements using a descendant selector?

easy

A. section span

B. section > span

C. section+span

D. section, span

Solution

1. Step 1: Recall descendant selector syntax

   The descendant selector uses a space between selectors to select nested elements.

2. Step 2: Analyze each option

   section > span uses child selector (>), section+span uses adjacent sibling (+), section, span selects both separately with a comma. Only section span uses a space correctly.

3. Final Answer:

   section span -> Option A

4. Quick Check:

   Space = descendant selector syntax [OK]

Hint: Use space between selectors for descendants [OK]

Common Mistakes:

• Using > instead of space for descendants
• Using + which selects siblings, not descendants
• Using comma which selects separate elements

3. Given the HTML:

<div>
  <article>
    <p>Hello</p>
  </article>
  <p>World</p>
</div>

And CSS:

div p { color: red; }

Which <p> elements will be red?

medium

A. Both <p> elements inside <div>

B. Only the <p> directly inside <div>

C. Only the <p> inside <article>

D. No <p> elements will be red

Solution

1. Step 1: Identify the selector target

   The selector div p selects all p elements inside any div, at any depth.

2. Step 2: Check HTML structure

   Both p elements are inside the div: one inside article (nested), one directly inside div.

3. Final Answer:

   Both <p> elements inside <div> will be red -> Option A

4. Quick Check:

   Descendant selector selects all nested matches [OK]

Hint: Descendant selector selects all nested matches [OK]

Common Mistakes:

• Thinking only direct children are selected
• Ignoring nested elements inside other tags
• Assuming only first matching element is styled

4. Consider this CSS rule:

ul li a { text-decoration: none; }

But the links inside list items are still underlined. What is the most likely problem?

medium

A. The selector is incorrect; it should be ul > li > a.

B. The a elements are not inside li elements.

C. There is a more specific CSS rule overriding this one.

D. CSS does not support descendant selectors.

Solution

1. Step 1: Understand the selector

   The selector ul li a correctly targets a inside li inside ul.

2. Step 2: Consider CSS specificity and overrides

   If links remain underlined, likely another CSS rule with higher specificity or inline style overrides this rule.

3. Final Answer:

   There is a more specific CSS rule overriding this one. -> Option C

4. Quick Check:

   Overrides cause expected styles to fail [OK]

Hint: Check for more specific CSS rules overriding yours [OK]

Common Mistakes:

• Assuming descendant selector syntax is wrong
• Not checking for CSS specificity conflicts
• Ignoring inline styles or browser defaults

5. You want to style all <em> elements inside <article> elements, but only if they are inside a <section> inside that <article>. Which CSS selector correctly targets this?

hard

A. article em section

B. article section em

C. article > section > em

D. section article em

Solution

1. Step 1: Understand the nesting order

   The em is inside section, which is inside article. So the order is article then section then em.

2. Step 2: Analyze each selector

   article section em uses article section em which matches em inside section inside article. section article em reverses order incorrectly. article > section > em uses child selectors which may be too strict. article em section is invalid order.

3. Final Answer:

   article section em -> Option B

4. Quick Check:

   Descendant selector order matches nesting order [OK]

Hint: Write selectors in ancestor to descendant order [OK]

Common Mistakes:

• Reversing selector order
• Using child selectors when descendants are nested deeper
• Confusing selector order with HTML structure