Grouping Multiple CSS Selectors

Grouping CSS selectors simplifies your stylesheets

Male office worker at workstation, view over shoulder
Christopher Robbins/Photodisc/Getty Images

Efficiency is an important factor in a successful website. A site should be efficient in how it uses images online to help ensure that the site performs well for visitors and loads quickly on their devices. Efficiency should also be a part of the overall process, helping you keep a site's progress on time and budget. 

Efficiency plays a role in all aspects of a website's creation and long-term success, including in the styles that are written for the site's CSS sheets. Being able to create leaner, cleaner CSS files is desirable, and one of the ways you can achieve this is by grouping multiple CSS selectors.

Grouping CSS Selectors

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three or more CSS rules, all of which do the same thing (set the color of something to red, for example), you have a single CSS rule that accomplishes the same thing for your page.

There are several reasons why the grouping of selectors benefits a page. First off, your stylesheet is smaller and loads more quickly. Admittedly, style sheets are not one of the main culprits when it comes to slow loading sites. CSS files are text files, so even really long CSS sheets are tiny, file-size wise when compared to unoptimized images. Still, every little bit counts, and if you can shave some size off your CSS and load the pages that much faster, that is always a good thing.

In general, above average load speeds for sites are less than 3 seconds; 3 to 7 seconds is about average, and more than 7 seconds is too slow. To avoid a long load time on your site, you need to do everything you can. Grouping CSS selectors can help.

How to Group CSS Selectors

To group CSS selectors in a style sheet, you use commas to separate multiple grouped selectors in the style. In this example, the style affects the p and div elements:

div, p { color: #f00; }

The comma means "and," so this selector applies to all paragraph elements and all division elements. If the comma were missing, the selector would instead apply to all paragraph elements that are a child of a division. That is a different kind of selector, so the comma is important.

Any form of selector can be grouped with any other selector. In this example, a class selector is grouped with an ID selector:

p.red, #sub { color: #f00; }

This style applies to any paragraph with the class attribute of "red" and any element (since the kind is not specified) that has an ID attribute of "sub."

You can group any number of selectors, including selectors that are single words and compound selectors. This example includes four different selectors:

p, .red, #sub, div a:link { color: #f00; }

This CSS rule would apply to the following:

  • Any paragraph element
  • Any element with the class of "red"
  • Any element with an ID of "sub"
  • The "link" pseudo class of the anchor elements that are descendants of a division.

That last selector is a compound selector. You can see it is easily combined with the other selectors in this CSS rule. The rule sets the color of #f00 (which is red) on these four selectors, which is preferable to writing four separate selectors to achieve the same result.

Another benefit of grouping selectors is that if you need to make a change, you can edit one single CSS rule instead of multiple ones. This approach saves page weight and time when it comes to maintaining the site in the future.

Any Selector Can Be Grouped

Any valid selector can be placed in a group, and all elements in the document that match all the grouped elements will have the same style based on that style property.

Some people prefer to list the grouped elements on separate lines for legibility in the code. The appearance on the website and the load speed remains the same. For example, you can combine styles separated by commas into one style property in one line of code:

th, td, p.red, div#firstred { color: red; }

or you can list the styles on individual lines for clarity:

th,
td,
p.red,
div#firstred
{
 color: red;
}

Either method you use to group multiple CSS selectors speeds up your site and make it easier to manage styles in the long term.