What You’ll Learn

Selector grouping lets you apply the same CSS to multiple selectors at once by separating them with commas. It keeps stylesheets DRY and easier to maintain.

Introduction

The CSS selector grouping pattern — written as element, element or selector1, selector2 — lets you apply the same styles to multiple elements simultaneously. It is one of the most practical techniques for keeping stylesheets clean and concise.

Instead of writing three separate rules with identical properties, you list every selector separated by commas in a single rule block. Every matching element receives the same declarations.

Definition and Usage

Separate selectors with a comma. There is no space required after the comma, though h1, h2, p with spaces is the conventional readable format. Each selector in the list is evaluated independently — if an element matches any one of them, the styles apply.

📝 Syntax

The syntax for selector grouping is:

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

List any valid CSS selectors separated by commas. The declarations inside the braces apply to every selector in the list.

Basic Example

h1, h2, p {
  color: #1e3a8a;
  font-family: system-ui, sans-serif;
}

button {
  background: #dbeafe;
  border: none;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

h1:hover, h2:hover {
  color: #1d4ed8;
}

Comma vs Space

Syntax Rules

• Separate selectors with commas; spaces after commas improve readability.
• Each selector in the list is independent — no parent-child relationship is created.
• You can mix element, class, ID, attribute, and pseudo-class selectors.
• Trailing commas are invalid in CSS (unlike JavaScript arrays).
• More specific rules elsewhere can override grouped styles for individual elements.

Related Topics

• element — single tag selector
• .class — class selector
• element element — descendant combinator (space, not comma)

When to Use Selector Grouping

Comma grouping is ideal whenever multiple selectors share identical styles:

• Typography resets — Apply the same font and color to h1, h2, h3, p.
• Button systems — Style button, .btn, input[type="submit"] together.
• Layout regions — Share padding on header, footer, main.
• Interactive states — Group a:hover, button:hover for consistent hover color.
• Form fields — Unify borders on input, textarea, select.

Examples Gallery

Practice selector grouping with typography, buttons, hover states, and layout regions.

h1, h2, p {
  color: #1e3a8a;
  font-family: system-ui, sans-serif;
}

button {
  background: #dbeafe;
  border: none;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

button, .btn, input[type="submit"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

h1, h2 {
  color: #1e3a8a;
  cursor: pointer;
  transition: color 0.2s;
}

h1:hover, h2:hover {
  color: #1d4ed8;
}

header, footer, main {
  padding: 1rem 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
}

header, footer {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

💬 Usage Tips

• Group similar elements — Combine selectors that genuinely share the same visual treatment.
• Split when styles diverge — Do not force unrelated elements into one group if they need different values.
• One property per line — Keep grouped rule blocks readable for future edits.
• Layer specificity — Follow grouped base rules with more specific overrides when needed.
• Group pseudo-classes too — Patterns like a:focus, button:focus reduce duplication for accessibility.

⚠️ Common Pitfalls

• Comma vs space — div, p groups selectors; div p targets nested paragraphs.
• One-size-fits-all styles — Shared padding on h1, p may look wrong; headings often need different spacing.
• Specificity overrides — A later, more specific rule can undo your grouped styles for one element only.
• Over-grouping — Cramming unrelated selectors together makes maintenance harder when one element needs to change.
• Invalid trailing comma — h1, h2, without a following selector is a CSS syntax error.

♿ Accessibility

• Focus styles — Group a:focus-visible, button:focus-visible for consistent keyboard indicators.
• Color contrast — Ensure grouped text colors meet WCAG contrast on all targeted elements.
• Semantic HTML — Grouping does not replace using the correct element for its role.
• Do not hide content — Avoid grouped rules that remove focus outlines or make text unreadable.
• Touch targets — When grouping buttons and links, verify minimum tap size on mobile.

💡 Best Practices