Combinator and grouping selectors
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which selector targets every <p> nested anywhere inside a <div>?
2. True or False: 'h1, h2' applies the same rule to both h1 and h2.
3. Which symbol selects the element immediately after a sibling?
4. Which targets only the direct child <li> of a <ul>?
5. True or False: 'h2 ~ p' selects every <p> that follows an <h2> and shares its parent.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1div p | Ah2 + p | |
| 2h1, h2, h3 | BApplies one shared rule to h1, h2 and h3 (grouping) | |
| 3Selects only the direct child elements of a parent | Cul > li | |
| 4Selects the element immediately after a sibling | DSelects every <p> nested inside a <div> at any depth (descendant) | |
| 5div > > p { } | EThe adjacent sibling combinator + is repeated; use a single + like 'h2 + p' | |
| 6h2 + + p { } | FThe child combinator > is doubled; use a single > like 'div > p' |
C
Definitions
div p
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
div _ p {
color: red;
}
2.
h1 _ p {
margin: 0;
}
3.
h1, h2, __ {
color: teal;
}
4.
h2 _ p {
color: gray;
}
5.
header a, footer _ a {
color: navy;
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
article, p {
B
color: navy;
C
}
Question 2
A
h1,
B
h2.
C
h3 {
D
margin: 0;
E
}
Question 3
A
header a,
B
footer a,
C
main > > a {
D
color: blue;
E
}
Question 4
A
div + + p {
B
margin-top: 0;
C
}
Question 5
A
ul li,
B
ol, li {
C
color: red;
D
}
Answer Key
Combinator and grouping selectors
Section A: Quick Questions
Q1
B — div p
Q2
A — True
Q3
B — +
Q4
A — ul > li
Q5
A — True
Section B: Match the Pairs
Q1
div p → Selects every <p> nested inside a <div> at any depth (descendant)
Q2
h1, h2, h3 → Applies one shared rule to h1, h2 and h3 (grouping)
Q3
Selects only the direct child elements of a parent → ul > li
Q4
Selects the element immediately after a sibling → h2 + p
Q5
div > > p { } → The child combinator > is doubled; use a single > like 'div > p'
Q6
h2 + + p { } → The adjacent sibling combinator + is repeated; use a single + like 'h2 + p'
Section C: Definitions
Q1
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.Section D: Fill in the Blanks
Q1
div > p {
color: red;
}Q2
h1 + p {
margin: 0;
}Q3
h1, h2, h3 {
color: teal;
}Q4
h2 ~ p {
color: gray;
}Q5
header a, footer > a {
color: navy;
}Section E: Spot the Error
Q1
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'.
Q2
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,'.
Q3
C — Line 2 has two child combinators in a row, which is invalid. Use a single '>': 'main > a'.
Q4
A — Two adjacent sibling symbols in a row are invalid. Use one '+': 'div + p'.
Q5
B — Line 1 uses a comma, which groups <ol> and <li> separately. For list items inside an ordered list, use a space: 'ol li'.