Complex selector combinations in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Which selector matches all

elements that are direct children of

but not those inside nested
?

Consider the following HTML structure:

<ul>
  <li>Item 1</li>
  <li>Item 2
    <ul>
      <li>Subitem 2.1</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

Which CSS selector will style only the top-level <li> elements?

A ul > li

B ul li

C ul li > ul li

D ul + li

💡 Hint

Think about the difference between direct child and any descendant selectors.

The selector 'ul > li' matches only

elements that are direct children of a

. 'ul li' matches all
• descendants, including nested ones. 'ul li > ul li' targets nested
• inside nested
  . 'ul + li' looks for
  • immediately following a
    , which doesn't match here.

❓ selector

intermediate

Which selector matches all elements that are both checked and disabled?

You want to style all checkboxes or radio buttons that are checked and disabled at the same time.
Which CSS selector will select these elements?

A input:checked:disabled

B input:checked, :disabled

C input[checked][disabled]

D input:checked & :disabled

💡 Hint

Use pseudo-classes combined without commas to select elements matching all conditions.

The selector 'input:checked:disabled' matches input elements that are both checked and disabled. Option A selects inputs that are checked or any disabled element (comma separates selectors). Option A tries attribute selectors but 'checked' and 'disabled' are not attributes but states. Option A is invalid syntax.

❓ selector

advanced

What is the specificity of the selector 'section#main.content > article.highlighted:first-child'?

Calculate the specificity of this CSS selector:

section#main.content > article.highlighted:first-child

Specificity is counted as (a,b,c) where:
- a = number of ID selectors
- b = number of class, attribute, and pseudo-class selectors
- c = number of type selectors and pseudo-elements

A (1,3,3)

B (1,2,3)

C (0,4,2)

D (1,3,2)

💡 Hint

Count each selector type carefully: IDs, classes/pseudo-classes, and element names/pseudo-elements.

The selector has 1 ID (#main), 3 classes/pseudo-classes (.content, .highlighted, :first-child), and 2 type selectors (section, article). So specificity is (1,3,2).

❓ layout

advanced

Which CSS selector combination correctly targets all

You want to style all

A nav button:disabled.active

B nav button:disabled, nav button.active

C nav > button:disabled, nav > button.active

D nav button:disabled, .active

💡 Hint

Remember that commas separate selectors and each selector applies independently.

Option B selects buttons inside nav that are disabled and buttons inside nav with class active. Option B selects disabled buttons inside nav and any element with class active anywhere. Option B selects buttons that are both disabled and active simultaneously. Option B selects only direct child buttons, missing nested buttons.

❓ accessibility

expert

Which complex selector best targets all focusable elements inside a form for custom focus styling, excluding disabled elements?

You want to apply a custom focus style to all focusable elements inside a form, but you want to exclude any elements that are disabled.
Which CSS selector will correctly select these elements?

A form :focus:not(:disabled)

B form :focus:enabled

C form :is(input, select, textarea, button):not(:disabled):focus

D form :is(input, select, textarea, button):focus:disabled

💡 Hint

Use :is() to group element types and :not() to exclude disabled elements.

Option C selects input, select, textarea, and button elements inside form that are focused and not disabled. Option C selects any focused element inside form that is not disabled. Option C uses :enabled, a pseudo-class that applies mainly to form controls. Option C selects focused elements that are disabled, which is opposite of the goal.

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 >