Complex selector combinations 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, not all nested elements.

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

The space selector selects all

elements inside a

, no matter how deep.

2fill in blank

medium

Complete the code to select only <li> elements that are direct children of <ul>.

CSS

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

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

A(space)

B~

C+

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using a space selects all descendants, not just direct children.

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

The '>' selector targets only direct children, so only

directly inside

are selected.

3fill in blank

hard

Fix the error in the selector to select all <input> elements that are immediately preceded by a <label>.

CSS

label[1]input { border: 1px solid red; }

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

A+

B>

C(space)

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using a space selects any descendant, not just immediate siblings.

Using '>' selects children, but input is a sibling here.

The '+' selector selects the next sibling immediately after the first element.

4fill in blank

hard

Fill both blanks to select all <div> elements that are siblings after a <header>.

CSS

header[1]div[2] { background-color: lightgray; }

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

A+

B>

C~

D(space)

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' selects only the next sibling, not all siblings.

Using '>' selects children, not siblings.

The '~' selector selects all siblings after the header, and the space after div is just part of the selector syntax.

5fill in blank

hard

Fill all three blanks to create a selector that selects <span> elements inside <article> that are direct children of <section>.

CSS

article[1]section[2]span[3] { color: green; }

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

A(space)

B>

C+

D~

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' or '~' where child or descendant selectors are needed.

Mixing up the order of selectors.

The space selects descendants, '>' selects direct children, and the last space selects descendants again.