Using Selectors

Both CSS1 and CSS2 define selectors that can be used when creating style rules. The CSS1 selectors should be supported by all current browsers, whereas support for CSS2 selectors is less consistent among current browsers. The following sections describe the different CSS1 and CSS2 selectors that can be used in style rules. Don't insert any of the examples in your document yet; you will be using many of these in the following examples.

Using CSS1 Selectors

Following are descriptions of the CSS1 selectors with examples of how they are used in style sheets:

A simple selector (also called a type selector) is used to apply style properties to a single element. For instance:

<style type="text/css">
h1 { color: blue; background: transparent; text-align: center; }
</style>

A group selector is used to apply style properties to a comma-separated group of elements:

p, blockquote, th, td, address { font-size: 1.1em; font-
family: Arial, sans-serif; }

A descendant selector (also called a contextual selector) is used to apply style properties to an element that is the descendant of another element. The following example applies the specified style properties to any P element that is a descendant (nested at any level inside) of a DIV element:

div p { margin-left: 1em; margin-right: 1em; }

A class selector is used to apply style properties to elements that belong to the same class. The following example applies the style properties to any DIV element that belongs to the "footer" class (has a class="footer" attribute set):

div.footer { font-size: 0.9em; font-style: italic; }

On the other hand, the period at the start of the following style rule indicates that the following style properties are to be applied to any element that belongs to the "biggie" class (has a class="biggie" attribute set):

.biggie { font-size: 2.5em; font-weight: bold; }

An ID selector works similarly to a class selector, except an ID attribute is the hook, rather than a CLASS attribute. According to the HTML 4 specifications, ID attributes must be unique, which means that an ID selector should only be used to specify style properties for a single instance of an element, in order for the document to be a valid HTML 4 document. The following example applies the style properties to any DIV element that belongs to the "announce" class (has an id="announce" attribute set):

div#announce { color: white; background: black; padding: 5px;
margin-left: 25px; margin-right: 25px; border: 6px yellow
double; }

#announce { color: white; background: black; padding: 5px;
margin-left: 25px; margin-right: 25px; border: 6px yellow
double; }

Using CSS2 Selectors

FIND IT ONLINE
There are a number of additional selectors defined by the CSS2 specification, but support for them by current browsers is still uneven. CSS2 selectors include universal, child, adjacent sibling, and attribute selectors. For descriptions of the CSS2 selectors, see the "Selectors" section in the CSS2 specification at www.w3.org/TR/REC-CSS2/selector.html.