Foxipa
/
CSS
/
CSS Exercises
/
CSS Quiz Exercises
/
Test your knowledge: CSS Combinators

Quiz

Test your knowledge: CSS Combinators

A short assessment covering descendant, child, next-sibling, and subsequent-sibling combinators in CSS selectors.

6 questions ~3 min Beginner

Knowledge check

Test your knowledge: CSS Combinators

A short assessment covering descendant, child, next-sibling, and subsequent-sibling combinators in CSS selectors.

Stuck? Each question has an optional hint.
Skip a hard question and review it before your results.
Questions and answer options can shuffle between attempts.

You can retake this quiz whenever you like.

0:00

Question 1 of 6

Which selector matches a paragraph at any depth inside an element with the class `.card`?

Look for the selector that uses whitespace rather than a relationship symbol.

Answer options A .card > p B .card p C .card + p D .card ~ p

Whitespace is the descendant combinator, so .card p can match a paragraph at any depth below a matching card.

Review this lesson

Question 2 of 6

Which selector requires the `a` element to be a direct child of `nav`?

The child combinator is narrower than the descendant combinator.

Answer options A nav a B nav > a C nav + a D nav ~ a

The > combinator requires the matched element to be a direct child of the first selector.

Review this lesson

Question 3 of 6

Which combinator selects a paragraph immediately following an `h2` under the same parent?

This combinator requires the two elements to be adjacent siblings.

Answer options A Whitespace B > C + D ~

The + combinator is the next-sibling combinator and matches an element immediately preceded by the first selector.

Review this lesson

Question 4 of 6

Which selector can match paragraphs that appear later than an `h2` among siblings, even when another element occurs between them?

Unlike the plus combinator, this relationship does not require adjacency.

Answer options A h2 + p B h2 > p C h2 p D h2 ~ p

The ~ combinator matches later siblings of the same parent, not just the immediately following sibling.

Review this lesson

Question 5 of 6

If a rule should apply only to direct children, which relationship is the more precise choice?

Choose the relationship that expresses a direct parent-child connection.

Answer options A Descendant combinator B Child combinator C Next-sibling combinator D Subsequent-sibling combinator

The child combinator expresses a direct parent-child relationship, so it is narrower than a descendant selector.

Review this lesson

Question 6 of 6

What does the selector `.sidebar > ul li a` express?

Read each relationship from left to right: the ul must be a direct child, while later relationships use descendant matching.

Answer options A An a element that is a direct child of .sidebar B Any a element in the document C An a element inside an li that is inside a ul directly under .sidebar D Only an a element immediately following .sidebar

The > requires the ul to be a direct child of .sidebar. The whitespace between ul, li, and a then allows descendant relationships at those levels.

Review this lesson

Quiz results

0/0

Review

Which selector matches a paragraph at any depth inside an element with the class .card?
Whitespace is the descendant combinator, so .card p can match a paragraph at any depth below a matching card.
Which selector requires the a element to be a direct child of nav?
The > combinator requires the matched element to be a direct child of the first selector.
Which combinator selects a paragraph immediately following an h2 under the same parent?
The + combinator is the next-sibling combinator and matches an element immediately preceded by the first selector.
Which selector can match paragraphs that appear later than an h2 among siblings, even when another element occurs between them?
The ~ combinator matches later siblings of the same parent, not just the immediately following sibling.
If a rule should apply only to direct children, which relationship is the more precise choice?
The child combinator expresses a direct parent-child relationship, so it is narrower than a descendant selector.
What does the selector .sidebar > ul li a express?
The > requires the ul to be a direct child of .sidebar. The whitespace between ul, li, and a then allows descendant relationships at those levels.

Back to lesson Next:

Test your knowledge: CSS Combinators

Test your knowledge: CSS Combinators

Which selector matches a paragraph at any depth inside an element with the class .card?

Which selector requires the a element to be a direct child of nav?

Which combinator selects a paragraph immediately following an h2 under the same parent?

Which selector can match paragraphs that appear later than an h2 among siblings, even when another element occurs between them?

If a rule should apply only to direct children, which relationship is the more precise choice?

What does the selector .sidebar > ul li a express?

Quiz results

Review

Which selector matches a paragraph at any depth inside an element with the class `.card`?

Which selector requires the `a` element to be a direct child of `nav`?

Which combinator selects a paragraph immediately following an `h2` under the same parent?

Which selector can match paragraphs that appear later than an `h2` among siblings, even when another element occurs between them?

What does the selector `.sidebar > ul li a` express?