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.