Bird
Raised Fist0
CSSmarkup~5 mins

Descendant selector in CSS

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
Introduction
The descendant selector helps you style elements that are inside other elements, like decorating a room inside a house.
You want to change the color of all paragraphs inside a section.
You want to make all links inside a navigation bar bold.
You want to add spacing to list items inside a menu.
You want to style all buttons inside a form differently.
You want to change font size of text inside a specific container.
Syntax
CSS
ancestor descendant {
  property: value;
}
The space between ancestor and descendant means 'inside'.
It selects all descendants, no matter how deep they are nested.
Examples
This styles all links inside any <nav> element with blue color.
CSS
nav a {
  color: blue;
}
This adds space below every paragraph inside a section.
CSS
section p {
  margin-bottom: 1rem;
}
This makes all buttons inside elements with class 'container' green with white text.
CSS
.container button {
  background-color: green;
  color: white;
}
Sample Program
The CSS styles all paragraphs inside the
element with dark red color and bold text. Paragraphs outside the article keep default styles.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Descendant Selector Example</title>
  <style>
    article p {
      color: darkred;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <article>
    <p>This paragraph is inside the article and will be dark red and bold.</p>
    <div>
      <p>This paragraph is also inside the article, nested deeper, and will be styled too.</p>
    </div>
  </article>
  <p>This paragraph is outside the article and will have default style.</p>
</body>
</html>
OutputSuccess
Important Notes
Descendant selector matches all levels inside the ancestor, not just direct children.
Use it to keep your CSS organized by targeting elements inside specific containers.
Be careful: too broad descendant selectors can slow down your page if overused.
Summary
Descendant selector uses a space between two selectors to style elements inside others.
It applies styles to all matching elements nested anywhere inside the ancestor.
Great for styling parts of your page without adding extra classes or IDs.

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