Simple Attribute Selectors | Cascading Style Sheets: Designing for the Web (3rd Edition)

One of the most powerful ways on which to base selection is on an attribute. Recall from Chapter 1, "The Web and HTML," that an attribute is a characteristic quality, other than the type or content of an element. In that chapter, we discussed the attributes HREF, SRC, and ALT. In this section, we discuss two other attributes: CLASS and ID.

Both these attributes can be used with any HTML element, and we will see how they can create powerful selectors. They are not the only attributes that can occur in a selector, but they are very common, and CSS makes using CLASS and ID especially easy. How to refer to other attributes is explained in the section, "Advanced attribute selectors."

The CLASS Attribute

The CLASS attribute enables you to apply declarations to a group of elements that have the same value on the CLASS attribute. All elements inside BODY can have a CLASS attribute. Essentially, you classify elements with the CLASS attribute, create rules in your style sheet that refer to the value of the CLASS attribute, and then the browser automatically applies those rules to the group of elements.

For example, say that you are an actor rehearsing for the role of Polonius in Shakespeare's Hamlet. In your copy of the manuscript, you want all the lines by Polonius to stand out. The first step to achieve this is to classify Polonius' lines; that is, set the CLASS attribute on all elements that contain lines by Polonius. Figure 4.1 shows how you set the CLASS value.

Figure 4.1. Setting a CLASS attribute on an HTML element.

In Figure 4.1, the class name chosen is POLONIUS. Authors pick class names.

Class names must be single words, although you can use digits and dashes. The following are all acceptable class names:

POLONIUS
name-10
first-remark

But the following are not:

The man (contains a space)
item+12 (contains a plus sign)
last!! (contains exclamation marks)

In contrast to element names, class names are case-sensitive, which means you must spell class names in the style sheet with exactly the same uppercase and lowercase letters as in the HTML source file.

The next step is to write style rules with selectors that refer to the class name. A selector that includes a class name is called a class selector. Figure 4.2 shows a rule with a selector that selects all of Polonius' elements.

Figure 4.2. Anatomy of a rule with a class selector.

The class selector starts with a flag character (the period), which signals what type of selector follows. For class selectors, the period was chosen because it is associated with the term "class" in many programming languages. Translated into English, the flag character reads "elements with class name." The whole selector says, "elements with class name POLONIUS." Authors are free to choose class names. Assuming that you have consistently classified elements containing lines by Polonius, they will be printed in a bold font.

Let's look at a complete example that introduces a second class:

 <HTML>   <TITLE>Hamlet, excerpt from act II</TITLE>   <STYLE TYPE="text/css">     .POLONIUS { font-weight: bold }     .HAMLET { font-weight: normal }   </STYLE>   <BODY>     <P CLASS=POLONIUS>       Polonius: Do you know me, my lord?   <P CLASS=HAMLET>     Hamlet: Excellent well,     You are a fishmonger.   <P CLASS=POLONIUS>     Polonius: Not I, my lord.   <P CLASS=HAMLET>     Hamlet: Then I would you     were so honest a man.   </BODY> </HTML>

In this example, two classes have been defined, HAMLET and POLONIUS. The style sheet in the STYLE element sets the font weight (the "thickness" of the fonts; see Chapter 5) to be different. The result is shown in Figure 4.3

Figure 4.3. The formatted fragment with Polonius' lines in bold.

As you can see, Polonius' lines stand out. This is an invaluable tool when you rehearse a role.

One could argue that the same result could be achieved without style sheets. By enclosing Polonius' lines in STRONG or B elements, they would also come out bold. This is true, but consider the consequences when the actor who is scheduled to play Hamlet catches a cold and you have to replace him. Now, you suddenly need Hamlet's lines to stand out and Polonius' lines to use the normal font weight. If you had been using STRONG elements to emphasize Polonius' lines, you'd have to remove them and add them to Hamlet's lines instead. But, if you use CSS, you simply change two lines in the style sheet:

 .POLONIUS { font-weight: normal } .HAMLET { font-weight: bold }

This reverses the effect and Hamlet's lines stand out now, as shown in Figure 4.4

Figure 4.4. The same fragment from Shakespeare, but with the font weights reversed.

The CLASS attribute is a powerful feature of CSS. We recommend that you use the CLASS attribute to add more information about elements information that can enhance the presentation of your documents. We do not recommend that you use the CLASS attribute to completely change the presentation of an element. For example, you can easily change an LI element to look like an H1 element by classifying it. If you want an element to look like H1, we recommend that you mark it up as H1. Do not let style sheets replace the structure of your documents; instead, let the style sheets enhance the structure.

The ID Attribute

The ID attribute works like the CLASS attribute with one important difference: The value of an ID attribute must be unique throughout the document. That is, every element inside BODY can have an ID attribute, but the values must all be different. This makes the ID attribute useful for setting style rules on individual elements. A selector that includes an ID attribute is called an ID selector. The general form of an ID selector resembles that of the class selector in the previous section (see Figure 4.5).

Figure 4.5. Anatomy of a rule with an ID selector.

Notice that the flag character for ID selectors is a hash mark (#). The flag character alerts the browser that an ID value is coming up next. In English, the selector says "the element with an ID value equal to xyz34." The entire rule reads, "The element with an ID value equal to xyz43 is to be underlined." The author is free to pick the value of the ID attribute, and the chosen value is case-insensitive.

The HTML syntax of the element on which you want to use the ID attribute resembles that of other elements with attributes; for example:

 <P ID=xyz34>Underlined text</P>

Combined with this style sheet rule, the content of the element will be underlined. Because the value of the ID attribute must be unique, you could not also include in the same document another usage of it, such as the following:

 <H1 ID=xyz34>A headline</H1> <P ID=xyz34>Underlined text</P>   <!-- WRONG! -->

Instead, you would have to give the two elements different ID values:

 <H1 ID=xyz34>A headline</H1> <P ID=xyz35>Underlined text</P>

Here is a complete example using an ID selector:

 <HTML>   <TITLE>ID showoff</TITLE>   <STYLE TYPE="text/css">     #xyz34 { text-decoration: underline }   </STYLE>   <BODY>     <P ID=xyz34>Underlined text</P>   </BODY> </HTML>

By using the ID selectors, you can set style properties on a per-element basis. Like CLASS, ID is a powerful feature. It carries the same cautions we set out in the previous section.