Introduction

CSS grouping allows you to apply styles to multiple elements using a single declaration. This simplifies your CSS code and improves readability.

Here's how to group selectors in CSS:

/* Group elements by comma-separated selectors */
.header, .footer {
  background-color: #f0f0f0;
}

/* Group elements using a combined selector */
nav ul li a {
  color: blue;
  text-decoration: none;
}

In the first example, the styles are applied to both the elements with class header and footer. In the second example, the styles are applied to all anchor elements (a) that are direct children of list items (li) within a navigation menu (nav ul).

Summary

• CSS grouping helps you apply styles to multiple elements using a single declaration.
• Use commas to separate individual selectors in a group.
• You can also use combined selectors for more specific grouping.
• Use CSS grouping wisely and avoid grouping unrelated elements.