Web Design in a Nutshell, 3rd Edition

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 class="special">Attention!</h1>
    <p class="special">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 period—it 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.