CSS Group Selector: Apply Styles to Multiple Elements

Group Selector

In CSS, a group selector allows you to apply the same style rules to multiple elements by combining selectors using commas. This helps avoid redundancy and keeps your CSS clean, efficient, and maintainable.

Why Use Group Selectors ?

Instead of writing the same styles repeatedly for different tags, group them together and apply the style once.

Syntax:

selector1, selector2, selector3 {
   /* CSS properties */
}

Example:

h1, h2, p {
   text-align: center;
   color: blue;
}

Example: Without Group Selector

h1 {
  text-align: center;
  color: blue;
}

h2 {
  text-align: center;
  color: blue;
}

p {
  text-align: center;
  color: blue;
}

This leads to unnecessary repetition in your stylesheet

Example: With Group Selector ( Optimized)

h1, h2, p {
   text-align: center;
   color: blue;
}

Clean and efficient: All three elements share the same styling.

Example:

<!DOCTYPE html>
<html>

<head>
  <style>
    h1, h2, p {
      text-align: center;
      color: blue;
    }
  </style>
</head>

<body>
  <h1>Hello Quipoin.com</h1>
  <h2>Hello Javatpoint.com (In smaller font)</h2>
  <p>This is a paragraph.</p>
</body>

</html>

Output:

Key Point

Group selectors save time and reduce code duplication.

Always separate selectors with commas.

You can group any combination of elements, IDs, or classes.