← HTML & CSS

Combinator and grouping selectors

A space combinator like 'div p' targets every p inside a div. Combinators (space, >, +, ~) select by relationship; a comma groups selectors so several share one rule.

Part of: HTML and CSS Journey — Module 37

Understanding Combinator and grouping selectors in HTML & CSS

What it does: The > child combinator restricts the match to direct children, which 'ul > li' demonstrates. The + adjacent sibling combinator selects the element right after its sibling, as 'h2 + p' shows. A comma groups selectors so they share one set of declarations. > selects direct children only; a space selects descendants at any depth. ~ is the general sibling combinator, matching all later siblings, not just the next one. 'div p' uses a space, the descendant combinator, to match every <p> inside a <div>. The commas group the three selectors so the same declarations apply to all of them.

Common mistakes: The comma groups selectors, so this targets every <article> and every <p> separately. To target paragraphs inside an article, use a space (descendant combinator): 'article p'. Line 1 ends with a period, which starts a class selector and breaks the group. Each grouped selector is separated by a comma: 'h2,'.

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Combinator and grouping selectors to a class →

This module's key terms are also in a printable crossword (Modules 31–41) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
Which selector targets every <p> nested anywhere inside a <div>?
div pdiv > p
Matches
div > > p { }
↓
The child combinator > is doubled; use a single > like 'div > p'
Applying
Meanings
Term
div p
Meaning
A space combinator like 'div p' targets every p inside a div. Combinators (space, >, +, ~) select by relationship; a comma groups selectors so several share one rule.
Practice
div p {
Testing
Gaps
div p {
Check Answer
Spots
1article, p {
2 color: navy;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Ostrich' badge — Full Sprint, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Which selector targets every <p> nested anywhere inside a <div>?
A. div > p
B. div p ✓
A space is the descendant combinator (any depth); > matches only direct children.
2. True or False: 'h1, h2' applies the same rule to both h1 and h2.
A. True ✓
B. False
A comma groups selectors so they share one set of declarations.
3. Which symbol selects the element immediately after a sibling?
A. ~
B. + ✓
+ is the adjacent sibling combinator; ~ matches all following siblings.
4. Which targets only the direct child <li> of a <ul>?
A. ul > li ✓
B. ul li
> selects direct children only; a space selects descendants at any depth.
5. True or False: 'h2 ~ p' selects every <p> that follows an <h2> and shares its parent.
A. True ✓
B. False
~ is the general sibling combinator, matching all later siblings, not just the next one.

Match the Pairs

div p → Selects every <p> nested inside a <div> at any depth (descendant)
h1, h2, h3 → Applies one shared rule to h1, h2 and h3 (grouping)
Selects only the direct child elements of a parent → ul > li
Selects the element immediately after a sibling → h2 + p
div > > p { } → The child combinator > is doubled; use a single > like 'div > p'
h2 + + p { } → The adjacent sibling combinator + is repeated; use a single + like 'h2 + p'

Key Term

div p
A space combinator like 'div p' targets every p inside a div. Combinators (space, >, +, ~) select by relationship; a comma groups selectors so several share one rule.

Fill in the Blanks

1. div > p { color: red; }
Hint: Type the child combinator symbol that matches direct children only
2. h1 + p { margin: 0; }
Hint: Type the adjacent sibling combinator symbol
3. h1, h2, h3 { color: teal; }
Hint: Type the next heading selector to continue the comma-separated group
4. h2 ~ p { color: gray; }
Hint: Type the general sibling combinator symbol
5. header a, footer > a { color: navy; }
Hint: Type the child combinator symbol that matches direct children only

Spot the Error

Question 1
A article, p {
B color: navy;
C }
Line A — The comma groups selectors, so this targets every <article> and every <p> separately. To target paragraphs inside an article, use a space (descendant combinator): 'article p'.
Question 2
A h1,
B h2.
C h3 {
D margin: 0;
E }
Line B — Line 1 ends with a period, which starts a class selector and breaks the group. Each grouped selector is separated by a comma: 'h2,'.
Question 3
A header a,
B footer a,
C main > > a {
D color: blue;
E }
Line C — Line 2 has two child combinators in a row, which is invalid. Use a single '>': 'main > a'.
Question 4
A div + + p {
B margin-top: 0;
C }
Line A — Two adjacent sibling symbols in a row are invalid. Use one '+': 'div + p'.
Question 5
A ul li,
B ol, li {
C color: red;
D }
Line B — Line 1 uses a comma, which groups <ol> and <li> separately. For list items inside an ordered list, use a space: 'ol li'.

Student with a class code? Join your class →