CSS Selectors
CSS Group Selector
Combine selectors into a selector list when several elements share declarations, while understanding how one invalid selector can affect the rule.
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. The supporting concepts are explained in CSS Element Selector and CSS Class Selector.
Group Selector Syntax
css
selector1, selector2, selector3 {
property: value;
}Group Selector Example
css
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; |
Selector-list failure and forgiving lists
A traditional selector list is unforgiving: if one selector is invalid, the entire rule is discarded. Functional pseudo-classes such as :is() and :where() use forgiving selector lists, so an unsupported selector does not necessarily invalidate every argument. Group selectors because they share meaning and declarations, not simply because several rules happen to look similar today.
Example
Group Selector Complete Example
html
<!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>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| Selector list | 1 | 12 | 1 | 1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.
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.