Grouping Multiple CSS Selectors

Group Multiple CSS Selectors to Improve Load Speed

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

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

In the end, efficiency plays a role in all aspects of a website's creation and long term success, including in the styles that are written for that site's CSS sheets.

Being able to create leaner, cleaner CSS files is ideal, and one of the ways you can achieve this is by grouping multiple CSS selectors together.

Grouping Selectors

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

There are a number of reasons why this "grouping of selectors" benefits a page. First offt, your style sheet will be smaller and load 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 of your CSS and load the pages that much faster, that is always a good thing to do.

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 just too slow. These low numbers mean that, to achieve them with your site, you need to do everything you can! This is why you can help keep your site speedy using grouped CSS selectors.

How to Group CSS Selectors

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

div, p { color: #f00; }

The comma basically means "and".  So this selector applies to all paragraph elements AND all division elements. If the comma was missing, it would instead be all paragraph elements that are an child of a division. That is a very different kind of selector, so this comma really does change the meaning of the selector!

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; }

So this style applies to any paragraph with the class attribute of "red", AND any element (since we did not specify which kind) that has an ID attribute of "sub".

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

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

So 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 decendents 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.  With that rule, we are setting the color of #f00 (which is red) on these 4 selectors, which is preferable to writing 4 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 means that this approach saves you page weight and time when it comes to maintain the site in the future.

Any Selector Can be Grouped

As you can see from the above examples, 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 long term.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 5/8/17.