Bird
Raised Fist0
CSSmarkup~20 mins

Group selectors in CSS - Mini Project: Build & Apply

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
Styling Multiple Elements with Group Selectors
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants the headings and paragraphs to have the same text color and font style to keep the design consistent.
🎯 Goal: Build a CSS style using a group selector that applies the same color and font style to both <h1> and <p> elements on the page.
📋 What You'll Learn
Create an HTML skeleton with one <h1> heading and two <p> paragraphs.
Add a CSS group selector that targets both h1 and p elements.
Set the text color to #6B4226 (a warm brown) and the font family to Arial, sans-serif for these elements.
Ensure the CSS is linked properly in the HTML.
💡 Why This Matters
🌍 Real World
Group selectors help keep website styles consistent and reduce repeated code, making it easier to maintain and update designs.
💼 Career
Web developers use group selectors daily to efficiently style multiple elements, improving website appearance and user experience.
Progress0 / 4 steps
1
Create the HTML structure
Write the basic HTML skeleton with a <h1> element containing the text "Welcome to Sweet Treats Bakery" and two <p> elements with the texts "Freshly baked every day." and "Visit us for delicious pastries." inside the <body>.
CSS
Hint

Remember to include the <h1> and two <p> tags inside the <body> section.

2
Add a CSS file link
Inside the <head> section, add a <link> tag to connect an external CSS file named styles.css.
CSS
Hint

Use a <link> tag with rel="stylesheet" and href="styles.css".

3
Create the CSS group selector
In the styles.css file, write a CSS rule using a group selector that targets both h1 and p elements. Set the color property to #6B4226 and the font-family property to Arial, sans-serif.
CSS
Hint

Separate selectors with a comma and put the shared styles inside curly braces.

4
Complete and verify the styling
Ensure the styles.css file is saved and linked correctly. Add a comment at the top of styles.css that says /* Group selector for headings and paragraphs */.
CSS
Hint

Comments in CSS start with /* and end with */.

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