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.