Descendant selector in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a descendant selector in CSS?

A descendant selector targets elements that are inside another element, no matter how deep. It uses a space between selectors to show this relationship.

beginner

How do you write a descendant selector to style all span elements inside a div?

You write it as div span { /* styles here */ }. This means any span inside a div will get the styles.

beginner

True or False: The descendant selector only selects direct children elements.

False. The descendant selector selects all elements inside another element, at any level, not just direct children.

beginner

Example: What elements does this selector target? article p

It targets all p elements that are inside an article element, no matter how deeply nested.

intermediate

Why use descendant selectors instead of just class or id selectors?

Descendant selectors help style elements based on their location inside other elements. This keeps CSS organized and avoids adding many classes or ids.

Which CSS selector targets all li elements inside a ul?

A ul > li

B ul + li

C li ul

D ul li

The descendant selector 'ul li' selects all

elements inside any

, at any depth.

What does the space between selectors mean in CSS?

A Adjacent sibling

B Direct child only

C Descendant relationship

D No relation

A space between selectors means the second element is a descendant (child, grandchild, etc.) of the first.

Which selector matches only direct children?

A div span

B div > span

C div + span

D div ~ span

The '>' symbol selects only direct children, not all descendants.

If you want to style all paragraphs inside a section, which selector is correct?

A section p

B p section

C section > p

D section + p

'section p' selects all paragraphs inside a section, no matter how deep.

True or False: Descendant selectors can select elements nested multiple levels deep.

A True

B False

C Only one level deep

D Only siblings

Descendant selectors select elements nested at any depth inside another element.

Explain what a descendant selector is and how it works in CSS.

Think about how you find something inside a box inside a bigger box.

Describe the difference between a descendant selector and a child selector in CSS.

One is like any family member inside a house, the other is only the children living directly in the house.