Posted on by Mark Linton

CLASS and ID as CSS Selectors

So the main difference between <code>class</code> and <code>id</code> is that there can only be one thing on a page with a given <code>id</code>, while any number of things can have the same <code>class</code>. One way to interpret this is to say that <code>id</code> implies structure &mdash; in the same way that the <code><html></code>, <code><head></code>, and <code><body></code> elements do &mdash; while <code>class</code> implies presentation &mdash; in the same way that the <code><p></code>, <code><address></code>, and <code><blockquote></code> elements do.

1.4 Class as selector

To increase the granularity of control over elements, a new attribute has been added to HTML: ‘CLASS’. All elements inside the ‘BODY’ element can be classed, and the class can
be addressed in the style sheet:

<HTML>
    <HEAD>
        <TITLE>Title</TITLE>
        <STYLE TYPE="text/css">
            H1.pastoral { color: #00FF00 }
        </STYLE>
    </HEAD>
    <BODY>
        <H1 CLASS=pastoral>Way too green</H1>
    </BODY>
</HTML>

The normal inheritance rules apply to classed elements; they inherit values from their parent in the document structure.

One can address all elements of the same class by omitting the tag name in the selector:

.pastoral { color: green }  /* all elements with CLASS pastoral */

Only one class can be specified per selector. ‘P.pastoral.marine’ is therefore an invalid selector in CSS1. (Contextual selectors, described below, can have one class per simple selector)

CSS gives so much power to the CLASS attribute, that in many cases it doesn’t even matter what HTML element the class is set on — you can make any element emulate almost any other. Relying on this power is not recommended, since it removes the level of structure that has a universal meaning (HTML elements). A structure based on CLASS is only useful within a restricted domain, where the meaning of a class has been mutually agreed upon.

1.5 ID as selector

HTML also introduces the ‘ID’ attribute which is guaranteed to have a unique value over the document. It can therefore be of special importance as a style sheet selector, and can be addressed with a preceding ‘#’:

#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }

<P ID=z98y>Wide text</P>

In the above example, the first selector matches the ‘P’ element due to the ‘ID’ attribute value. The second selector specifies both an element type (‘H1’) and an ID value, and will therefore not match the ‘P’ element.

By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML. This use of style sheets is discouraged.

H&aring;kon Wium Lie and Bert Bos (1999, January 11), <i>Cascading Style Sheets, level 1</i>. Retrieved Monday, September 29, 2003, from <a href="http://www.w3.org/TR/CSS1" title="Cascading Style Sheets, level 1">www.w3.org/ TR/ CSS1</a>.