Avoiding deep nesting in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all p elements inside a section.

CSS

section [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, which is more specific than needed.

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

The space selector selects all p elements inside section at any depth, avoiding unnecessary deep nesting.

2fill in blank

medium

Complete the code to style all li elements inside a nav without deep nesting.

CSS

nav [1] li { font-weight: bold; }

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

A>

B~

C+

D(space)

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' limits selection to direct children only.

Using sibling selectors '+' or '~' won't select nested list items.

Using a space selects all li elements inside nav at any depth, avoiding deep nesting.

3fill in blank

hard

Fix the error in the selector to avoid deep nesting and select all span inside article.

CSS

article [1] div span { color: red; }

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

A(space)

B>

C+

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' limits selection to direct children, missing nested spans.

Using sibling selectors '+' or '~' do not select descendants.

Using a space between selectors selects all span elements inside article through any depth, avoiding unnecessary deep nesting.

4fill in blank

hard

Fill both blanks to select all button elements inside form without deep nesting.

CSS

form [1] div [2] button { background-color: green; }

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

A(space)

B>

C+

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' limits selection to direct children only.

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

Using spaces for both blanks selects all button elements inside form through any depth, avoiding deep nesting.

5fill in blank

hard

Fill all three blanks to create a flat selector for all input inside section.

CSS

section [1] div [2] form [3] input { border: 1px solid black; }

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

A(space)

B>

C+

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '>' restricts to direct children only.

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

Using spaces for all blanks selects all input elements inside section at any depth, avoiding deep nesting.