Complex selector combinations in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the CSS selector div > p select?

It selects all <p> elements that are direct children of a <div> element.

beginner

Explain the difference between div p and div > p selectors.

div p selects all <p> elements inside a <div>, no matter how deep.
div > p selects only <p> elements that are immediate children of the <div>.

intermediate

What does the selector ul li:first-child target?

It targets the first <li> element inside each <ul> list.

intermediate

How does the adjacent sibling selector h2 + p work?

It selects the first <p> element immediately following an <h2> element, only if they share the same parent.

intermediate

What is the purpose of the general sibling selector h2 ~ p?

It selects all <p> elements that are siblings of an <h2> element and come after it, regardless of how many elements are in between.

Which selector matches all <li> elements inside a <ul>, no matter how deeply nested?

A ul + li

B ul > li

C ul li

D ul ~ li

ul li selects all <li> inside <ul> at any depth. ul > li only selects direct children.

What does the selector p:first-child select?

A The first <code>&lt;p&gt;</code> in the document

B Every <code>&lt;p&gt;</code> that is the first child of its parent

C All <code>&lt;p&gt;</code> elements

D The first <code>&lt;p&gt;</code> inside a <code>&lt;div&gt;</code>

p:first-child selects <p> elements that are the very first child of their parent.

Which selector selects only <p> elements immediately after an <h1>?

A h1 + p

B h1 > p

C h1 p

D h1 ~ p

h1 + p selects the <p> that comes right after an <h1> sibling.

What does the selector section > article.highlight select?

A All <code>&lt;article&gt;</code> elements with class <code>highlight</code> that are direct children of <code>&lt;section&gt;</code>

B All <code>&lt;article&gt;</code> elements inside <code>&lt;section&gt;</code> siblings

C All <code>&lt;section&gt;</code> elements with class <code>highlight</code>

D All <code>&lt;article&gt;</code> elements with class <code>highlight</code> inside any <code>&lt;section&gt;</code>, at any depth

The > means direct children only, so it selects <article> with class highlight that are immediate children of <section>.

Which selector matches all siblings <p> after an <h3>?

A h3 > p

B h3 p

C h3 + p

D h3 ~ p

h3 ~ p selects all <p> siblings after <h3>, not just the immediate one.

Describe how you would select all paragraphs that are direct children of a div using CSS selectors.

Think about the symbol that means 'direct child' in CSS.

Explain the difference between the adjacent sibling selector and the general sibling selector in CSS.

One selects only the next sibling, the other selects all siblings after.

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 >