Grouping Selectors in CSS Tutorial

Introduction

CSS selectors tell the browser which HTML elements to style.

Sometimes, several different selectors need the same styles.

For example, you may want all headings to use the same line height:

1h1 {2  line-height: 1.2;3}4 5h2 {6  line-height: 1.2;7}8 9h3 {10  line-height: 1.2;11}

This works, but it repeats the same declaration several times.

CSS lets you group selectors together so they can share one declaration block:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This is called a selector list.

Grouping selectors helps reduce repetition, keep CSS shorter, and make shared styles easier to maintain.

What Does Grouping Selectors Mean?

Grouping selectors means writing several selectors before one declaration block.

Each selector is separated by a comma.

Example:

1h1,2h2,3h3 {4  color: navy;5}

This applies the same declaration to all three selectors.

It means the same thing as writing:

1h1 {2  color: navy;3}4 5h2 {6  color: navy;7}8 9h3 {10  color: navy;11}

The grouped version is shorter and easier to update.

If you later change the colour, you only change it in one place.

Selector List Syntax

A selector list uses commas.

The basic structure is:

1selector-one,2selector-two,3selector-three {4  property: value;5}

For example:

1h1,2h2,3h3 {4  margin-top: 0;5}

The commas are important.

They tell the browser that each selector is separate.

Without commas, CSS may read the selector as something completely different.

Why Commas Matter

This CSS groups three selectors:

1h1,2h2,3h3 {4  color: navy;5}

It selects:

1all h1 elements2all h2 elements3all h3 elements

This CSS does not group selectors:

1h1 h2 h3 {2  color: navy;3}

This means:

1select h3 elements inside h2 elements inside h1 elements

That is probably not what you want.

When applying the same styles to multiple selectors, separate them with commas.

Grouping Type Selectors

You can group type selectors.

Type selectors target elements by tag name.

Example:

1h1,2h2,3h3,4h4,5h5,6h6 {7  line-height: 1.2;8}

This applies the same line height to all heading levels.

Another example:

1p,2li,3blockquote {4  line-height: 1.6;5}

This gives paragraphs, list items, and blockquotes the same line height.

Grouping type selectors is useful for broad base styles.

Grouping Class Selectors

You can group class selectors too.

Example:

1.alert,2.notice,3.message {4  padding: 16px;5  border-radius: 6px;6}

This applies the same padding and border radius to elements with any of these classes.

HTML:

1<p class=”alert”>Important alert.</p>2<p class=”notice”>Helpful notice.</p>3<p class=”message”>General message.</p>

All three elements receive the shared styles.

You can then add separate styles for each one:

1.alert {2  border: 1px solid red;3}4 5.notice {6  border: 1px solid orange;7}8 9.message {10  border: 1px solid blue;11}

This is a common pattern.

Use grouped selectors for shared styles.

Use separate selectors for differences.

Grouping ID Selectors

You can group ID selectors.

Example:

1#site-header,2#main-content,3#site-footer {4  width: 90%;5  max-width: 1100px;6  margin: 0 auto;7}

This applies the same layout rule to three unique elements.

HTML:

1<header id=”site-header”>…</header>2<main id=”main-content”>…</main>3<footer id=”site-footer”>…</footer>

This is valid CSS.

However, IDs should be used carefully because they are meant to be unique.

For repeated styling, classes are usually more flexible:

1<header class=”container”>…</header>2<main class=”container”>…</main>3<footer class=”container”>…</footer>

CSS:

1.container {2  width: 90%;3  max-width: 1100px;4  margin: 0 auto;5}

This is usually cleaner for reusable layout styles.

Grouping Mixed Selectors

A selector list can contain different selector types.

For example:

1h1,2.page-title,3#main-heading {4  line-height: 1.2;5}

This applies the same declaration to:

1all h1 elements2elements with class=”page-title”3the element with id=”main-heading”

This is valid.

However, mixed groups should be used carefully.

If the selectors are unrelated, the rule can become harder to understand.

Group selectors when they share the same styling purpose.

Avoid grouping selectors only because they happen to need the same value today.

Grouping for Typography

Selector lists are often useful for typography.

Example:

1h1,2h2,3h3 {4  font-family: Georgia, serif;5  line-height: 1.2;6}

This applies the same font family and line height to three heading levels.

Another typography example:

1p,2li {3  line-height: 1.6;4}

This gives paragraphs and list items the same line spacing.

Grouping typography selectors can help create consistency across text elements.

Grouping for Layout

You can use grouping for shared layout styles.

Example:

1.site-header,2.main-content,3.site-footer {4  width: 90%;5  max-width: 1100px;6  margin-inline: auto;7}

HTML:

1<header class=”site-header”>…</header>2<main class=”main-content”>…</main>3<footer class=”site-footer”>…</footer>

This makes all three areas share the same width and centring.

However, if these elements are all meant to use the same layout container, a reusable class may be simpler:

1<header class=”container”>…</header>2<main class=”container”>…</main>3<footer class=”container”>…</footer>

CSS:

1.container {2  width: 90%;3  max-width: 1100px;4  margin-inline: auto;5}

Grouping is useful, but reusable classes are sometimes better.

Grouping for Form Controls

Form controls often share base styles.

Example:

1button,2input,3select,4textarea {5  font: inherit;6}

This makes common form controls inherit the page font.

Another example:

1input,2select,3textarea {4  width: 100%;5  padding: 10px;6}

This applies the same width and padding to text-like form controls.

Grouping is useful here because several related elements need the same base treatment.

Grouping for Buttons and Links

Sometimes links and buttons are styled similarly.

For example:

1.button,2button {3  padding: 10px 16px;4  border-radius: 6px;5}

This applies the same base style to real <button> elements and elements with class="button".

HTML:

1<button type=”submit”>Save</button>2<a class=”button” href=”signup.html”>Sign up</a>

This can be useful when a link visually behaves like a call-to-action button.

However, choose HTML elements based on purpose.

Use <button> for actions.

Use <a> for navigation.

CSS can make them look similar, but HTML meaning still matters.

Grouping for Components

Components often share some base styles.

For example:

1.card,2.panel,3.callout {4  padding: 24px;5  border-radius: 8px;6}

This gives cards, panels, and callouts common spacing and rounded corners.

Then each component can have its own extra styling:

1.card {2  border: 1px solid #dddddd;3}4 5.panel {6  background-color: #f5f7fb;7}8 9.callout {10  border-left: 4px solid navy;11}

This keeps shared styles together while allowing each component to be different.

Grouping for States

Sometimes several states need the same style.

Example:

1a:hover,2a:focus {3  text-decoration: underline;4}

This means links are underlined when hovered or focused.

Another example:

1button:hover,2button:focus {3  background-color: #eeeeee;4}

Grouping hover and focus states can help provide consistent mouse and keyboard interaction feedback.

Focus styles are important for keyboard users.

Do not style hover without considering focus.

Grouping Pseudo-Classes

Pseudo-classes can be grouped like other selectors.

Example:

1a:hover,2a:focus-visible {3  text-decoration: underline;4}

This applies the same style when a user hovers over a link or when the link receives visible keyboard focus.

Another example:

1input:focus,2textarea:focus,3select:focus {4  outline: 2px solid #0055cc;5}

This gives form controls a clear focus outline.

Grouping pseudo-classes can make interaction styles more consistent.

Grouping Nested Selectors

You can group more complex selectors.

Example:

1.card h2,2.panel h2,3.callout h2 {4  margin-top: 0;5}

This targets <h2> elements inside cards, panels, and callouts.

Another example:

1.site-header a,2.site-footer a {3  color: inherit;4}

This targets links inside the site header and site footer.

Grouping works with simple and complex selectors.

Just make sure each selector is separated by a comma.

Selector Lists and Specificity

Each selector in a selector list keeps its own specificity.

Example:

1h1,2.page-title,3#main-title {4  color: navy;5}

The h1 selector has type selector specificity.

The .page-title selector has class selector specificity.

The #main-title selector has ID selector specificity.

They share the same declaration block, but each selector still competes with other rules based on its own specificity.

This matters when other CSS rules target the same elements.

Selector Lists and Rule Order

Selector lists follow normal CSS rule order.

Example:

1h1,2h2 {3  color: navy;4}5 6h2 {7  color: darkgreen;8}

The <h1> stays navy.

The <h2> becomes dark green because the later h2 rule overrides the earlier h2 declaration when specificity allows it.

Grouped rules are not special.

They follow the same cascade rules as other CSS.

Selector Lists and Invalid Selectors

Be careful with invalid selectors.

In many cases, if one selector in a selector list is invalid, the whole rule can fail.

For example:

1h1,2.invalid??,3h2 {4  color: navy;5}

The invalid selector can cause the browser to ignore the whole selector list.

A better approach is to keep selector lists simple and valid.

If you are using newer or experimental selectors, check browser support and be careful about grouping them with important rules.

Grouping vs Separate Rules

Grouping is useful when selectors share the same declarations.

Good grouping:

1h1,2h2,3h3 {4  line-height: 1.2;5}

Separate rules are better when selectors need different styles:

1h1 {2  font-size: 3rem;3}4 5h2 {6  font-size: 2rem;7}8 9h3 {10  font-size: 1.5rem;11}

Do not force unrelated selectors into one group.

The goal is clearer CSS, not just shorter CSS.

Grouping Shared Styles and Adding Differences

A common pattern is to group shared styles first, then add differences separately.

Example:

1.alert,2.success,3.info {4  padding: 16px;5  border-radius: 6px;6  margin-bottom: 16px;7}8 9.alert {10  border: 1px solid red;11}12 13.success {14  border: 1px solid green;15}16 17.info {18  border: 1px solid blue;19}

HTML:

1<p class=”alert”>There was a problem.</p>2<p class=”success”>Your changes were saved.</p>3<p class=”info”>You can update this later.</p>

This avoids repetition while keeping each message type distinct.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>Grouping Selectors Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <header class=”site-header container”>11    <h1>CSS Selector Lists</h1>12    <nav>13      <a href=”index.html”>Home</a>14      <a href=”lessons.html”>Lessons</a>15    </nav>16  </header>17 18  <main class=”container”>19    <p class=”intro”>20      Grouping selectors lets several selectors share the same styles.21    </p>22 23    <section class=”card”>24      <h2>Shared Styles</h2>25      <p>Selectors can be grouped when they need the same declarations.</p>26    </section>27 28    <section class=”panel”>29      <h2>Clearer CSS</h2>30      <p>Grouping can reduce repetition and make styles easier to maintain.</p>31    </section>32 33    <form>34      <label for=”email”>Email address</label>35      <input type=”email” id=”email” name=”email”>36      <button type=”submit”>Subscribe</button>37    </form>38  </main>39 40  <footer class=”site-footer container”>41    <p>© 2026 CSS Learning Hub</p>42  </footer>43 44</body>45</html>

CSS:

1/* Shared typography */2h1,3h2,4p {5  margin-top: 0;6}7 8h1,9h2 {10  line-height: 1.2;11}12 13/* Shared layout */14.container {15  width: 90%;16  max-width: 1000px;17  margin-inline: auto;18}19 20/* Shared component styles */21.card,22.panel {23  padding: 24px;24  border-radius: 8px;25  margin-bottom: 24px;26}27 28.card {29  border: 1px solid #dddddd;30}31 32.panel {33  background-color: #f5f7fb;34}35 36/* Shared form control styles */37button,38input,39select,40textarea {41  font: inherit;42}43 44input,45button {46  padding: 10px 16px;47}48 49/* Shared link states */50a:hover,51a:focus-visible {52  text-decoration: underline;53}

This example uses grouping for typography, components, form controls, and interaction states.

How the Complete Example Works

This grouped rule removes top margins from several text elements:

1h1,2h2,3p {4  margin-top: 0;5}

This grouped rule applies the same line height to headings:

1h1,2h2 {3  line-height: 1.2;4}

This grouped rule applies shared component styles:

1.card,2.panel {3  padding: 24px;4  border-radius: 8px;5  margin-bottom: 24px;6}

Then .card and .panel get their own differences.

This grouped rule applies font inheritance to form controls:

1button,2input,3select,4textarea {5  font: inherit;6}

The grouped selectors reduce repetition while keeping the stylesheet organised.

Common Mistake: Forgetting Commas

Incorrect:

1h1 h2 h3 {2  color: navy;3}

Correct:

1h1,2h2,3h3 {4  color: navy;5}

The incorrect version does not select all three headings.

It selects an h3 inside an h2 inside an h1.

Use commas when grouping selectors.

Common Mistake: Grouping Selectors That Should Be Separate

Less clear:

1h1,2button,3.card,4footer {5  margin-bottom: 20px;6}

These selectors do not clearly belong together.

Better:

1h1 {2  margin-bottom: 20px;3}4 5button {6  margin-bottom: 20px;7}8 9.card {10  margin-bottom: 20px;11}12 13footer {14  margin-bottom: 20px;15}

Or better, organise spacing based on layout and component rules.

Grouping should make CSS clearer, not more confusing.

Common Mistake: Repeating the Same Declarations Instead of Grouping

Less efficient:

1h1 {2  line-height: 1.2;3}4 5h2 {6  line-height: 1.2;7}8 9h3 {10  line-height: 1.2;11}

Better:

1h1,2h2,3h3 {4  line-height: 1.2;5}

Grouping reduces repeated code when the declarations are genuinely shared.

Common Mistake: Grouping Too Much

A very long selector list can become hard to read:

1h1,2h2,3h3,4p,5li,6blockquote,7button,8input,9textarea,10.card,11.panel,12.notice,13.alert,14.site-header,15.site-footer {16  margin-bottom: 16px;17}

This is hard to understand and may affect too much.

A better approach is to use smaller, purpose-based groups:

1h1,2h2,3h3 {4  line-height: 1.2;5}6 7p,8li,9blockquote {10  line-height: 1.6;11}12 13.card,14.panel {15  margin-bottom: 24px;16}

Shorter, meaningful groups are easier to maintain.

Common Mistake: Not Realising One Invalid Selector Can Break the Group

This can fail:

1h1,2.bad??selector,3h2 {4  color: navy;5}

If one selector in the list is invalid, the browser may ignore the whole rule.

Keep selector lists valid.

If you are unsure about a selector, test it separately.

Common Mistake: Grouping When a Reusable Class Would Be Better

This works:

1.site-header,2.main-content,3.site-footer {4  width: 90%;5  max-width: 1000px;6  margin-inline: auto;7}

But this may be cleaner:

1<header class=”container”>…</header>2<main class=”container”>…</main>3<footer class=”container”>…</footer>

1.container {2  width: 90%;3  max-width: 1000px;4  margin-inline: auto;5}

If several elements share a repeated layout pattern, a class can be more flexible than a grouped selector.

Common Mistake: Grouping Hover but Forgetting Focus

Less accessible:

1a:hover {2  text-decoration: underline;3}

Better:

1a:hover,2a:focus-visible {3  text-decoration: underline;4}

Mouse users get hover feedback.

Keyboard users get focus feedback.

When grouping interaction states, consider both pointer and keyboard interaction.

Best Practices

Use selector lists to apply the same declarations to multiple selectors.

Separate selectors with commas.

Group selectors only when they genuinely share the same styling purpose.

Use grouping to reduce repetition.

Keep selector lists readable.

Prefer smaller, purpose-based groups over very long mixed groups.

Use separate rules when selectors need different styles.

Use reusable classes when several elements share the same component or layout pattern.

Remember that each selector in a list keeps its own specificity.

Remember that one invalid selector can affect the whole group.

Use browser developer tools to check which grouped rules are active.

Summary

Grouping selectors means applying the same CSS declarations to several selectors.

The syntax uses commas:

1h1,2h2,3h3 {4  line-height: 1.2;5}

This means the same declarations apply to h1, h2, and h3.

Without commas, the selector means something different:

1h1 h2 h3 {2  line-height: 1.2;3}

Grouped selectors are useful for shared typography, layout, components, form controls, and interaction states.

For example:

1button,2input,3select,4textarea {5  font: inherit;6}

and:

1a:hover,2a:focus-visible {3  text-decoration: underline;4}

The main idea is simple:

1Group selectors when the same styles belong to all of them.2Keep selectors separate when their styles or purpose differ.

Used well, grouping selectors makes CSS shorter, clearer, and easier to maintain.