Use Simple Selectors and Substitution

The selector part of a style rule is the link between your styles and your HTML elements. Selectors use pattern matching to determine which style rules apply to which elements in the document tree. Properly used, selectors can save you plenty of space and time tweaking pages. For the smallest CSS rules, use the simplest, highest DOM-hierarchy selectors you can, take advantage of inheritance, and group both selectors and declarations.

Use Type Selectors

Type selectors and the "universal" selector ( * ) are the simplest and most powerful selectors. "A type selector matches every instance of the element type in the document tree." ^[1] For example,

^[1] Bert Bos et al., "Chapter 5, Selectors," in Cascading Style Sheets, level 2 CSS2 Specification [online], (Cambridge, MA:World Wide Web Consortium, 1998), available from the Internet at http://www.w3.org/TR/REC-CSS2/selector.html.

 p { font-family: sans-serif } 

matches all p elements in the document tree.

A better way to do this would be to use the body element, because all descendants of this element inherit its properties (with some buggy exceptions for Netscape 4), like this:

 body { font-family: sans-serif } 

Type selectors are the most general way to style your structure, and therefore they are the most efficient to use.

Use Descendant Selectors to Get Specific

As you'd expect, a descendant selector allows authors to style elements that are the descendants of another element. Suppose that you want to style all code elements inside div s. You do the following:

 div code {color:red} 

Now any code fragments inside div s will be styled red.

 <div>This is a <code>code red</code> alert.</div> 

This "in context" selector avoids the need to use a class or id selector, saving space and separating style information ( class or id attributes) from structure.

CSS2 and CSS3 add some additional contextual selectors like child and sibling selectors, but these can be too specific for effective optimization. CSS2 introduced the notion of attribute selectors, where you can match elements with certain attribute characteristics. These offer possibilities for optimization, but are not yet widely supported. Once they are, you will be able to do things like this:

 a[title=ext] {color:red} /* color all external links red */  ... <a href="http://www.w3.org/" title="ext-w3c">The World Wide Web Consortium</a> 

Use Short class and id Selector Names

The nice thing about CSS compared to (X)HTML is that you are not locked into a fixed set of tags. For high-traffic pages, you can abbreviate class and id names to one or two characters to save space. You can create a map file that shows the expanded abbreviations for easier updates (for example, index.cssmap ). In HTML, you can leave off the quotes; in XHTML you must quote all attributes, including class . So instead of this:

 .very-important-section {font-weight: bold;} 

Do this:

 .v{font-weight:bold;} 

Of course, now you lose the advantage of embedding keywords inside your selectors for search engines, but there's always a tradeoff . You could use a dual-pronged approach and fully optimize home pages but use more descriptive selectors on interior pages.

Pseudo Selectors

What if you want to target the "state" of an element or something that's not part of the document tree? That's where pseudo selectors come in. Pseudo-class selectors allow you to target the state of an element (for example, hover , focus , active , etc.) to make them more interactive. In most cases, this means links and forms, or things you interact with inside a web page. CSS1 introduced three pseudo-classes that can be applied to the anchor tag: link , visited , and active . For example:

 a:link    { color: blue }  a:visited { color: purple } a:active  { color: red } 

The colon ( : ) signifies a pseudo selector. These selectors replace the HTML link , vlink , and alink attributes to the body tag with CSS equivalents.

CSS2 introduced two new dynamic pseudo-classes: hover and focus . "The hover pseudo-class applies while the user 'designates' an element but does not activate it." ^[2] This usually means that a cursor is hovering over a link or element. "The focus pseudo-class applies while an element has focus" or will accept input. ^[2] This can be used to identify a form element that has focus. Here's an example:

^[2] Bos et al., Cascading Style Sheets [online].

 a:link    { color: blue }        /* unvisited links       */  a:visited { color: purple }      /* visited links         */ a:hover   { color: yellow }      /* user hovers           */ a:active  { color: red }         /* active links          */ :focus    { background: yellow } /* user gives focus */ 

Note that when you are using pseudo-classes, they must be in this order. A:hover must be after a:link and a:visited , because cascading style sheets will hide the color property of the a:hover rule if it appears before them. Also, to target links specifically , the hover pseudo-class should come after the link and visited pseudo-classes, like this:

 a:link:hover { color: yellow }  /* more specific hover */  a:visited:hover { color: yellow }  /* more specific hover */ 

For more information, see Chapter 8, "Advanced CSS Optimization," and the CSS2 specification at http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes.

NOTE: Regarding CSS2 browser support, Netscape 6+, IE5+, and Opera 3.5+ support the hover and focus pseudo-classes.

Substitute CSS2-Based Rollovers

You can use the hover pseudo-class to create dynamic effects without JavaScript or images. JavaScript-free rollovers are possible and much faster with hover . Some authors change the font size or weight on rollover, although browsers are not required to reflow pages due to pseudo-class selections. In Chapter 8, I show you how to save space by replacing conventional JavaScript-based image rollovers with CSS2 rollovers.