The CSS Group Selector is used to apply the same styles to multiple elements at once.
Instead of writing separate CSS rules for each element, you can group them together using a comma ( , ), making your code cleaner and more efficient.
selector1, selector2, selector3 {
property: value;
}h1, p {
color: blue;
}👉 This will apply the same style to both <h1> and <p> elements.
Attributes
| Property | Description | Example |
|---|---|---|
| color | Sets text color | color: red; |
| font-size | Sets text size | font-size: 20px; |
| text-align | Aligns text | text-align: center; |
| background | Sets background color | background: yellow; |
| margin | Adds outer spacing | margin: 10px; |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Group Selector</title>
<style>
h1, p {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Group Selector Example</h1>
<p>This paragraph is styled using group selector.</p>
<p>All selected elements share the same styles.</p>
</body>
</html>Output
Browser Output
The heading and all paragraphs will appear in blue color
Text will be center aligned
Same styles are applied to multiple elements
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- Use comma ( , ) to separate multiple selectors
- Helps reduce code repetition
- Improves readability and maintainability
- Can combine different selector types (e.g.,
h1, .class, #id) - Each selector in the group gets the same styles
Conclusion
The CSS Group Selector is a simple yet effective way to apply the same styles to multiple elements. It helps keep your code clean, efficient, and easier to manage, especially in larger projects.
