CSS Selectors

CSS Selectors
CSS uses selectors to define which rules apply to which HTML elements. The formal specification is available at CSS3 selectors. Here are some excerpts.

Multiple Classes
You can assign an element to multiple classes:

&lt;p class="small note"&gt;

Pseudo Selectors
Pseudo selectors match depending on the current state. They are frequently used to change the behaviour of links when you hover over them.

CSS1 defined Link pseudo-selectors and dynamic pseudo-selectors.

Order
You should defined the pseudo-selectors in this order for compatibility with CSS 1:

a:link   { color: #00e; } /* Blue for unvisited links */ a:visited { color: #508; } /* Purple for visited links */ a:hover  { color: #0bb; } /* Green, when the mouse hovers over the link */ a:active { color: #f00; } /* Red, the moment you click a link */

Focus Surrounding Hovers
You can accomplish interesting effects by combining Descendant and Pseudo-Selectors, even with CSS 1:

CSS: p:hover a { border: 1px dotted gray; } HTML: &lt;p&gt;Lorem ipsum &lt;a href=""&gt;dolor&lt;/a&gt; sit amet&lt;/p&gt;

The link gains a dotted border, even when you hover over the surrounding paragraph, drawing attention to it.

First Letter Pseudo-Selectors
To get a dropped initial letter, and the rest of the line in caps:

P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } P:first-line  { text-transform: uppercase }

Before/After Pseudo-Selectors
Example: p.warning {color: red; font-weight: bold; } p.warning:before {content: "Warning: "} h1:before {content: counter(chapter);}

Attribute Selectors
Advanced example (taken from Lim Chee Aun), where abbreviations with a title attribute will have a hover-effect:

HTML: &lt;abbr title="Hypertext Markup language"&gt;HTML&lt;/abbr&gt;

CSS:

abbr[title]:hover:after{ content: " (" attr(title) ")"; }