CSS: Group Selectors

CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.

So this:

div#main {border:1px solid red;}
div#sidebar {border:1px solid red;}

Becomes this:

dive#main, div#sidebar {
    border:1px solid red;
}

You can combine grouped selectors with contextual and other selectors to create powerful yet compact rules for your style sheets. The body id/class method used to highlight current tabs is one example of this technique.

This abbreviated form of specifying style is supported by most modern browsers. You can combine grouping of selectors with grouping of declarations to create even more powerful CSS rules. We'll cover grouping of declarations in an upcoming tweak.

Further Reading

CSS Home Page

From the W3C

CSS Optimization

Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.

Cascading Style Sheets, level 2 CSS2 Specification

The CSS specification, from the W3C. By Bert Bos et al.

CSS Support Charts

Eric Meyer. The master CSS reference grid.

CSS: The Definitive Guide

Eric A. Meyer, (O'Reilly, 2000). A great introduction to CSS which includes descriptions of these shorthand properties. See also Meyerweb.com.

By website optimization on 10 Nov 2003 PM