HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Selectors

CSS Group Selector

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.

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

PropertyDescriptionExample
colorSets text colorcolor: red;
font-sizeSets text sizefont-size: 20px;
text-alignAligns texttext-align: center;
backgroundSets background colorbackground: yellow;
marginAdds outer spacingmargin: 10px;

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>

Output

Browser Output

css

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.

PreviousCSS Universal SelectorNextCSS Colors