Descendant selector in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all p elements inside any div.

CSS

div [1] p { color: blue; }

Drag options to blanks, or click blank then click option'

A>

B(space)

C+

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' selects only direct children, not all descendants.

Using '+' or '~' selects siblings, not descendants.

The space between selectors means descendant. It selects all p elements inside div, no matter how deep.

2fill in blank

medium

Complete the code to select all span elements inside any section.

CSS

section[1]span { font-weight: bold; }

Drag options to blanks, or click blank then click option'

A>

B+

C(space)

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' selects only direct children, missing deeper descendants.

Using '+' or '~' selects siblings, not descendants.

The space means select all span elements inside section, no matter how deep.

3fill in blank

hard

Fix the error in the selector to select all li elements inside any ul.

CSS

ul[1]li { list-style-type: none; }

Drag options to blanks, or click blank then click option'

A(space)

B+

C>

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' selects only direct children, missing nested li.

Using '+' or '~' selects siblings, not descendants.

The space is needed to select all li elements inside ul, not just direct children or siblings.

4fill in blank

hard

Fill both blanks to select all em elements inside any article.

CSS

article[1]em { font-style: italic; } /* [2] selector */

Drag options to blanks, or click blank then click option'

A(space)

B>

CDescendant

DChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' instead of space for descendant selector.

Writing 'Child' instead of 'Descendant' in the comment.

The space is the descendant selector, which selects all em inside article. The comment explains this.

5fill in blank

hard

Fill all three blanks to select all strong elements inside any nav and add a comment naming the selector.

CSS

nav[1]strong { color: red; } /* [2] selector used here to select [3] */

Drag options to blanks, or click blank then click option'

A(space)

B>

CDescendant

Dall nested <strong> elements

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' instead of space for descendant selector.

Wrong comment text that does not explain the selector.

The space is the descendant selector symbol. The comment names the selector and explains it selects all nested strong elements inside nav.