Group selectors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What elements are styled by this CSS rule?

Given the CSS rule h1, p, .highlight { color: red; }, which elements will have red text?

A Only <h1> elements and elements with class 'highlight'

B All <h1>, <p> elements, and elements with class 'highlight'

C Only <p> elements and elements with class 'highlight'

D Only elements with class 'highlight'

💡 Hint

Remember that group selectors apply the same style to all listed selectors.

The group selector h1, p, .highlight applies the style to all <h1> elements, all <p> elements, and any element with the class 'highlight'.

📝 Syntax

intermediate

Identify the syntax error in this group selector

Which option shows the correct way to write a group selector for <h2>, <div>, and elements with class 'note'?

A h2 div .note { font-weight: bold; }

B h2; div; .note { font-weight: bold; }

C h2 div, .note { font-weight: bold; }

D h2, div, .note { font-weight: bold; }

💡 Hint

Group selectors are separated by commas, not spaces or semicolons.

Option D correctly uses commas to separate selectors. Option D selects .note inside div inside h2, which is different. Option D uses semicolons which is invalid syntax. Option D groups h2 div (descendant selector) and .note, which is not the same as grouping h2 and div separately.

❓ rendering

advanced

What color will the text be for <p class='highlight'> in this CSS?

Consider this CSS:

p, .highlight { color: blue; }
.highlight { color: green; }

What color will the text inside <p class='highlight'> be?

CSS

<p class='highlight'>Hello</p>

A Blue

B Black (default)

C Green

D Both blue and green (mixed)

💡 Hint

Later rules override earlier ones if selectors have the same specificity.

The <p> and .highlight selectors both apply blue color, but the later .highlight rule sets color to green, overriding the earlier blue for elements with class 'highlight'.

❓ accessibility

advanced

How does grouping selectors affect accessibility styling?

If you want to increase font size for all headings (<h1>, <h2>, <h3>) and paragraphs with class 'important' for better readability, which CSS rule is best?

A h1, h2, h3, .important { font-size: 1.5rem; }

B h1 h2 h3 .important { font-size: 1.5rem; }

C h1; h2; h3; .important { font-size: 1.5rem; }

D h1 + h2 + h3 + .important { font-size: 1.5rem; }

💡 Hint

Use commas to group selectors for applying the same style to multiple elements.

Option A correctly groups selectors with commas to apply the font size to all headings and .important paragraphs. Option A selects .important inside h3 inside h2 inside h1, which is incorrect. Option A uses semicolons which is invalid. Option A uses adjacent sibling selectors which do not select all those elements.

🧠 Conceptual

expert

How many elements are affected by this CSS group selector?

Given the HTML:

<h1>Title</h1>
<p>Paragraph</p>
<div class='note'>Note</div>
<span class='note'>Span Note</span>

And CSS:

h1, p, .note { color: purple; }

How many elements will have purple text?

A 4

B 3

C 2

D 1

💡 Hint

Count all elements matching any selector in the group.

The <h1> and <p> elements match their selectors. Both <div> and <span> have class 'note', so all four elements get purple text.

Practice

1. What does a group selector in CSS do?
h1, p, div { color: red; }

easy

A. Styles all listed elements with the same CSS rules

B. Styles only the first element listed

C. Styles elements only if they are inside each other

D. Styles elements randomly on the page

Solution

1. Step 1: Understand the comma in CSS selectors

   The comma separates multiple selectors, meaning the rule applies to each separately.

2. Step 2: Apply the rule to all selectors

   Each element listed (h1, p, div) will get the color red style.

3. Final Answer:

   Styles all listed elements with the same CSS rules -> Option A

4. Quick Check:

   Comma separates selectors = style all [OK]

Hint: Commas mean style all listed elements together [OK]

Common Mistakes:

• Thinking comma means nested elements
• Believing only first selector is styled
• Confusing group selector with descendant selector

2. Which of the following is the correct syntax for a group selector in CSS?

easy

A. h1 + p + div { color: blue; }

B. h1 p div { color: blue; }

C. h1; p; div { color: blue; }

D. h1, p, div { color: blue; }

Solution

1. Step 1: Identify the correct separator for group selectors

   Group selectors use commas to separate multiple selectors.

2. Step 2: Check each option's syntax

   h1, p, div { color: blue; } uses commas correctly; others use spaces, semicolons, or plus signs incorrectly.

3. Final Answer:

   h1, p, div { color: blue; } -> Option D

4. Quick Check:

   Commas separate selectors in groups [OK]

Hint: Use commas, not spaces or semicolons, to group selectors [OK]

Common Mistakes:

• Using spaces instead of commas
• Using semicolons inside selector list
• Confusing combinators (+) with group selectors

3. Given the CSS:

h2, .highlight { font-weight: bold; }

and HTML:

<h2>Title</h2>
<p class="highlight">Important text</p>
<div>Normal text</div>

Which elements will appear bold?

medium

A. Both the <h2> and the <p> with class 'highlight'

B. Only the <p> with class 'highlight'

C. Only the <h2> element

D. All elements including <div>

Solution

1. Step 1: Understand the group selector targets

   The CSS targets all <h2> elements and any element with class 'highlight'.

2. Step 2: Match HTML elements to selectors

   The <h2> matches the first selector, and the <p> with class 'highlight' matches the second.

3. Final Answer:

   Both the <h2> and the <p> with class 'highlight' -> Option A

4. Quick Check:

   Group selector applies to all listed selectors [OK]

Hint: Group selectors style all matching elements listed [OK]

Common Mistakes:

• Thinking only one selector applies
• Ignoring class selectors in group
• Assuming unrelated elements get styled

4. What is wrong with this CSS group selector?

h1, p; div { color: green; }

medium

A. No spaces between selectors

B. Missing curly braces

C. Semicolon is invalid between selectors

D. Color value is incorrect

Solution

1. Step 1: Check separator between selectors

   Selectors in a group must be separated by commas, not semicolons.

2. Step 2: Identify the syntax error

   The semicolon after 'p' breaks the selector list, causing invalid CSS.

3. Final Answer:

   Semicolon is invalid between selectors -> Option C

4. Quick Check:

   Use commas, not semicolons, to separate selectors [OK]

Hint: Use commas only to separate selectors in groups [OK]

Common Mistakes:

• Using semicolons instead of commas
• Forgetting commas between selectors
• Confusing property semicolons with selector separators

5. You want to style all <h1>, <h2>, and paragraphs with class 'intro' to have blue text and italic font. Which CSS group selector is correct?

hard

A. h1 + h2 + .intro { color: blue; font-style: italic; }

B. h1, h2, .intro { color: blue; font-style: italic; }

C. h1; h2; .intro { color: blue; font-style: italic; }

D. h1 h2 .intro { color: blue; font-style: italic; }

Solution

1. Step 1: Identify correct group selector syntax

   Group selectors list multiple selectors separated by commas.

2. Step 2: Check each option for correct syntax and meaning

   h1, h2, .intro { color: blue; font-style: italic; } uses commas correctly and targets all <h1>, <h2>, and elements with class 'intro'. Others use spaces, semicolons, or combinators incorrectly.

3. Final Answer:

   h1, h2, .intro { color: blue; font-style: italic; } -> Option B

4. Quick Check:

   Commas separate selectors to style all [OK]

Hint: Separate selectors with commas to style all at once [OK]

Common Mistakes:

• Using spaces instead of commas
• Using semicolons between selectors
• Using combinators (+) instead of commas