Bird
Raised Fist0
CSSmarkup~5 mins

Group selectors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Group selectors let you style many elements at once. This saves time and keeps your code neat.

You want to make all headings and paragraphs the same color.
You want multiple buttons to share the same background style.
You want to apply the same font to different text elements.
You want to add the same margin to several sections.
You want to quickly change styles for many elements without repeating code.
Syntax
CSS
selector1, selector2, selector3 { 
  property: value; 
}
Separate each selector with a comma and a space.
All selectors share the same style rules inside the curly braces.
Examples
This makes all h1, h2, and h3 headings blue.
CSS
h1, h2, h3 {
  color: blue;
}
This sets paragraphs and elements with class 'note' to a larger font size.
CSS
p, .note {
  font-size: 1.2rem;
}
This styles all buttons and submit inputs with a green background and white text.
CSS
button, input[type="submit"] {
  background-color: green;
  color: white;
}
Sample Program

This page uses a group selector to style h1, p, and elements with class 'highlight' all the same way. They get dark red text and the Arial font.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Group Selectors Example</title>
  <style>
    h1, p, .highlight {
      color: darkred;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to Group Selectors</h1>
  <p>This paragraph shares the same style as the heading.</p>
  <div class="highlight">This div also uses the same color and font.</div>
  <p>Another paragraph with the same style.</p>
</body>
</html>
OutputSuccess
Important Notes

Group selectors help keep your CSS short and easy to read.

Remember to separate selectors with commas and spaces for clarity.

You can group any selectors: tags, classes, or IDs.

Summary

Group selectors let you style many elements with one rule.

Use commas to separate selectors inside the CSS rule.

This saves time and keeps your code clean and simple.

Practice

(1/5)
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