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.