Descendant selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What elements does the descendant selector target?

Given the CSS selector div p, which elements will be styled?

A All <code>p</code> elements that are inside any <code>div</code>, no matter how deeply nested.

B Only <code>div</code> elements that are siblings of <code>p</code> elements.

C All <code>div</code> elements that contain a <code>p</code> element.

D Only <code>p</code> elements that are direct children of a <code>div</code>.

💡 Hint

Think about how spaces in selectors work in CSS.

The descendant selector div p matches all p elements inside a div, regardless of nesting depth. It does not limit to direct children.

📝 Syntax

intermediate

Identify the valid descendant selector syntax

Which of the following CSS selectors correctly uses the descendant selector to style all span elements inside section elements?

A section span

B section + span

C section > span

D section, span

💡 Hint

The descendant selector uses a space between selectors.

The selector section span selects all span elements that are descendants of section elements. The other options use different combinators or group selectors.

❓ rendering

advanced

What color will the text inside the nested p be?

Given this HTML and CSS, what color will the text inside the nested p be?

<div><section><p>Hello</p></section></div>

div p { color: blue; }
section p { color: red; }

A Blue

B Black (default)

C Red

D Purple

💡 Hint

Specificities are equal; consider the order of the rules.

Both selectors match the p element and have the same specificity (two type selectors), but section p appears later in the CSS, so it wins in the cascade.

❓ accessibility

advanced

How does the descendant selector affect accessibility when styling nested elements?

If you use a descendant selector like nav a to style links inside a navigation, what should you consider for accessibility?

A You must add ARIA roles to all elements matched by descendant selectors.

B Descendant selectors automatically improve keyboard navigation.

C Descendant selectors disable screen readers for nested elements.

D Ensure the color contrast of the styled links meets accessibility standards.

💡 Hint

Think about visual clarity and readability.

Using descendant selectors to style links affects their appearance. To keep content accessible, ensure color contrast is sufficient for users with visual impairments.

🧠 Conceptual

expert

Why might descendant selectors cause performance issues in large documents?

Consider a CSS rule like body div ul li a. Why can this descendant selector be less efficient for browsers to apply?

A Because descendant selectors always cause syntax errors in large documents.

B Because the browser must check each <code>a</code> element and verify the entire ancestor chain matches, which is slower for deep selectors.

C Because browsers ignore descendant selectors with more than three levels.

D Because descendant selectors prevent caching of styles.

💡 Hint

Think about how browsers match selectors from right to left.

Browsers match selectors from right to left. Deep descendant selectors require checking multiple ancestor levels for each matched element, which can slow down rendering in large documents.

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