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

When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. As a result, your style sheet is smaller and loads quickly. 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. Keep your site speedy using grouped CSS selectors.

How to Group CSS Selectors

Use commas to separate multiple grouped selectors in the style.

 In this example, the style affects the p and div elements:

p, div { color: #f00; }

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

You can group any number of selectors together. This example includes four different selectors:

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

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.