CSS: Class Selectors

By Richard York

Class and id selectors are the most widely supported selectors. There are two types of selectors. The class attribute is more generic, meaning it may encompass many elements in a given document, even elements of different types or purposes. On the other hand, you can use the id attribute only once per document. The name id tells you that the id must be unique. Besides using it in CSS, you can also use an element’s id to access it via a scripting language like JavaScript. You can also link to the location of the element with an id name using anchors. Anchors are appended to URLs to force a browser to go to a specific place in a document. So the id attribute serves more than one purpose. Think of it as an element’s address inside a document - no two addresses can be the same. The discussion continues with class selectors.

Class Selectors

Figure 3-1 is an example of a class name selector.

Figure 3-1

The class name selector begins with a dot, followed by the class name itself, which you choose. Typically, the class name is comprised of letters, numbers, and hyphens only, since this provides the best compatibility with older browsers. Class names also cannot include spaces. In Figure 3-2, you see the element that the class name planet applies style to in the HTML document.

Figure 3-2

The dot appearing before the class name in the CSS rule tells CSS that you are referencing a class selector. The dot does not need to appear in the class attribute value itself; in fact it cannot, because the value of the class attribute is just the class name itself.

When used in this context, the type of element doesn’t matter. In other words, you can also apply the class to other elements, as is illustrated in Figure 3-3.

Figure 3-3

The same rule applies to the element as applies to the

element. Both now have an absolute position, offset from the top zero pixels, offset from the left of zero pixels, and offset from the bottom of 15 pixels. What if you wanted to give both the

and element the same class name, but have a style sheet rule that applies to

elements, but not elements? You can do that, too. Limiting a class selector to a type of element is demonstrated in Figure 3-4.

Figure 3-4

In Figure 3-4, you see the combination of two types of selectors that you are already familiar with, the type selector from Chapter 2, and the class selector. When you append a type selector to a class selector, you limit the scope of the style sheet rule to only that type of element. In Figure 3-4, the rule is limited so that it only applies to

elements, causing it to no longer apply to elements, or any other type of element for that matter. You can still create additional rules that reference other elements, such as a new rule that only applies to elements with a class name of planet, such as img.planet, but the rule that you see in Figure 3-4 applies exclusively to

elements with a class name of planet.

Elements can also be assigned more than one class name. Figure 3-5 shows an example of this.

Figure 3-5

The value of this class attribute actually contains two class names: planet and jupiter. Each class name in the attribute is separated by a space. In the corresponding style sheet, the two classes may be referenced by two separate rules, as illustrated in Figure 3-6.

Figure 3-6

The two style sheet rules in Figure 3-6 result in the

element with both planet and jupiter class names receiving the declarations of both rules.

The class names may also be chained together in the style sheet, as shown in Figure 3-7.

Figure 3-7

The preceding rule applies only to elements that reference both class names in their class attribute.

IE 6 interprets chained class names per the CSS 1 specification, which did not allow chained class names in the style sheet. In IE 6, only the last class name in the chain is recognized. In the preceding example, IE 6 would interpret the .planet.jupiter selector as .jupiter only. This has been fixed in IE 7.

Whereas classes are meant to reference more than one element, ids are meant to reference only one ele-ment in a document.