Section 17.3. Class and ID Selectors

17.3. Class and ID Selectors

So far, all of the selectors we've seen have been tied to specific elements. Class selectors and ID selectors give you the opportunity to target elements that you've named yourself, independent of the document element.

Elements are named using the class and id attributes. They can be applied to all XHTML elements except base, head, html, meta, script, style, and title. In addition, class may not be used in basefont and param. Class and ID selectors work in slightly different ways.

17.3.1. class Selector

Use the class attribute to identify a number of elements as being part of a conceptual group. Elements in a class can then be modified with a single style rule. For instance, you can identify all the items in a document that you classify as "special":

     <h1 >Attention!</h1>     <p >You look marvelous today.</p> 

To specify the styles for elements of a particular class, add the class name to the type selector, separated by a period (.).

     h1.special {color: red;}     p.special {color: red;} 

To apply a property to all the elements of the same class, omit the tag name in the selector (be sure to leave the periodit is the character that indicates a class):

     .special {color: red;} 

Note that class names cannot contain spaces; use hyphens or underscores instead if necessary (although underscores are discouraged due to lack of support in some browsers).

When choosing a name for a class, be sure that it is meaningful. For example, naming a class redtext merely reintroduces presentational information to the document and does nothing to describe the type of information in the element. It may also be confusing if in a future redesign, the color of those elements changes to blue.

Authors should resist going overboard with class creation (a syndrome commonly referred to as "class-itis"). In many cases, other types of selectors with higher specificity, such as contextual or attribute selectors, may be used instead.

17.3.2. id Selector

The id attribute is used similarly to class, but it is used for targeting a single element rather than a group. id must be used to name an element uniquely (in other words, two elements can't have the same id name in the same document). It is not a problem for an id value to be used in multiple documents across a site; it only needs to be unique within each document. If you have several elements that need a similar treatment, use class instead.

The following example gives a paragraph a specific ID (note that the value of an id attribute must always begin with a letter):

     <p >New item added today</p> 

ID selectors are indicated by the octothorpe (#) symbol within the style sheet as follows:

     p#j061998 {color: red;} 

The element name may be omitted:

     #j061998 {color: red;} 

In modern web design, id attributes are frequently used to identify main sections (usually divs) within a page. Some common id values for this purpose are content, header, sidebar, navigation, and footer. Establishing sections of the page makes it easier to create contextual selectors so that elements can be styled based on where they appear on the page without the need to create extra classes.

Like class attributes, id names should be chosen based on the semantic role of the element, not its presentation. For example, for a sidebar on the left side of the page that contains news, it is preferable to name the div rather than .

The id attribute is also used in scripting to identify and access unique page objects.