Home » CSS: Group Selectors

CSS: Group Selectors


Group selectors for the same declaration in CSS to shrink your style sheets.

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.

Leave a Comment