Group selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a group selector in CSS?

A group selector lets you apply the same style to multiple selectors by listing them separated with commas. This saves time and keeps your CSS neat.

beginner

How do you write a group selector for <p> and <h1> elements?

You write it like this: p, h1 { /* styles here */ }. This applies the styles to both <p> and <h1> tags.

beginner

Why use group selectors instead of repeating styles?

Using group selectors reduces repetition, makes your CSS shorter, and easier to maintain. It’s like writing a message once and sending it to many friends instead of writing it separately for each.

intermediate

Can group selectors mix different types of selectors?

Yes! You can group element selectors, class selectors, and ID selectors together. For example: <code>h1, .title, #main { color: blue; }</code> applies the color to all three.

intermediate

What happens if one selector in a group selector is invalid?

If one selector is invalid, browsers ignore that selector but still apply styles to the valid ones. So, the rest of the group still works.

Which of the following is a correct group selector for <h2> and class .note?

A h2, .note { color: red; }

B h2 .note { color: red; }

C h2 .note, { color: red; }

D h2; .note { color: red; }

Option A correctly groups the element selector h2 and the class selector .note separated by a comma.

What does this CSS do? p, h1, .highlight { font-weight: bold; }

A Makes all paragraphs, h1 headings, and elements with class highlight bold.

B Makes only paragraphs bold.

C Makes only h1 headings bold.

D Makes only elements with class highlight bold.

The group selector applies the font-weight bold style to all three selectors listed.

Why is using group selectors helpful?

A It repeats styles for each selector.

B It applies styles to only one selector.

C It saves time and keeps CSS clean by applying styles to many selectors at once.

D It disables styles for all selectors.

Group selectors let you write styles once and apply them to many selectors, making CSS cleaner.

Which symbol separates selectors in a group selector?

A ;

B ,

C .

D #

Selectors in a group selector are separated by commas.

If you write h1, .title, #main { color: green; }, which elements get the green color?

A Only h1 elements

B Only elements with class title

C Only element with id main

D All h1 elements, elements with class title, and element with id main

All selectors in the group get the style applied.

Explain what a group selector is and why it is useful in CSS.

Think about how you can style multiple elements with one rule.

Write a CSS rule using a group selector to make all paragraphs and elements with class .note have blue text.

Remember to separate selectors with commas.