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.

Practice

1. Which CSS selector targets all <li> elements that are direct children of <ul> elements?

easy

A. ul > li

B. ul li

C. li > ul

D. ul + li

Solution

1. Step 1: Understand the direct child selector

   The symbol > means direct child in CSS selectors.

2. Step 2: Apply to the given elements

   ul > li selects only li elements that are immediate children of ul.

3. Final Answer:

   ul > li -> Option A

4. Quick Check:

   Direct child selector = > [OK]

Hint: Use > for direct child, space for any descendant [OK]

Common Mistakes:

• Confusing space (descendant) with > (direct child)
• Using + which selects only next sibling
• Reversing element order in selector

2. Which of the following is the correct CSS selector syntax to select the <p> element immediately following an <h2> element?

easy

A. h2 ~ p

B. h2 > p

C. h2 p

D. h2 + p

Solution

1. Step 1: Identify the adjacent sibling selector

   The + selector targets the element immediately after the first sibling.

2. Step 2: Match the selector to the question

   h2 + p selects the p that comes right after an h2.

3. Final Answer:

   h2 + p -> Option D

4. Quick Check:

   Adjacent sibling selector = + [OK]

Hint: Use + for immediate next sibling element [OK]

Common Mistakes:

• Using ~ which selects any following siblings, not just immediate
• Using > which selects child elements, not siblings
• Using space which selects any descendant

3. Given the HTML:

<div>
  <p class="intro">Hello</p>
  <span>World</span>
  <p>Again</p>
</div>

Which CSS selector will style only the second <p> element inside the <div>?

medium

A. div p ~ p

B. div p + span

C. div > p + p

D. div > p.intro

Solution

1. Step 1: Understand the HTML structure

   Inside div, there are two p elements separated by a span.

2. Step 2: Analyze each selector

   div > p + p selects a p immediately following another p as a direct child of div. Here, the second p is not immediately after the first p (there is a span in between), so this selector matches nothing.
   div p ~ p selects any p siblings after a p inside div. The second p is a sibling after the first p, so this matches the second p.

3. Step 3: Choose the correct selector

   div p ~ p correctly selects the second p element.

4. Final Answer:

   div p ~ p -> Option A

5. Quick Check:

   General sibling selector = ~ [OK]

Hint: Use ~ to select siblings after a specific element [OK]

Common Mistakes:

• Confusing + (adjacent sibling) with ~ (general sibling)
• Using > which requires direct child relationship
• Selecting by class when not needed

4. Consider this CSS selector:
section > article + p
What is wrong with this selector if the goal is to style all <p> elements that are direct children of section?

medium

A. The + combinator is invalid between article and p.

B. It selects all p elements inside section, not just direct children.

C. It only selects p elements immediately after an article, not all p children.

D. The selector should use a space instead of >.

Solution

1. Step 1: Understand the selector components

   section > article + p means: select any p element that is immediately after an article which is a direct child of section.

2. Step 2: Compare with the goal

   The goal is to select all p elements that are direct children of section. This selector only selects p elements that come immediately after an article child, missing other p children.

3. Final Answer:

   It only selects p elements immediately after an article, not all p children. -> Option C

4. Quick Check:

   Adjacent sibling + limits selection [OK]

Hint: Remember + selects only immediate next sibling [OK]

Common Mistakes:

• Thinking + selects all siblings
• Confusing > (child) with space (descendant)
• Assuming invalid syntax with + combinator

5. You want to style all <li> elements that are inside a <ul> with class menu, but only if the <li> is not the first child. Which CSS selector achieves this?

hard

A. ul.menu li + li

B. ul.menu > li:not(:first-child)

C. ul.menu > li:first-child

D. ul.menu > li ~ li

Solution

1. Step 1: Understand the requirement

   We want li elements inside ul.menu but exclude the first child li.

2. Step 2: Analyze each selector

   ul.menu > li:not(:first-child) selects all direct li children of ul.menu except the first one.
   ul.menu li + li selects every li immediately following another li, which also works but only for adjacent siblings.
   ul.menu > li ~ li selects all li siblings after the first li as direct children, which also works.
   However, the most precise and clear selector that excludes only the first child is ul.menu > li:not(:first-child).

3. Final Answer:

   ul.menu > li:not(:first-child) -> Option B

4. Quick Check:

   :not(:first-child) excludes first child [OK]

Hint: Use :not(:first-child) to exclude first child elements [OK]

Common Mistakes:

• Using :first-child instead of :not(:first-child)
• Confusing + and ~ selectors for all siblings
• Missing direct child combinator >