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.<br>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.