Bird
Raised Fist0
CSSmarkup~30 mins

Descendant selector in CSS - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.
Progress0 / 4 steps
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
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
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
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/5)
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