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.