11.3 Assigning Style Sheet Rules to an Individual Element

NN 4, IE 4

11.3.1 Problem

You want a single element to stand out by having its own style sheet rule.

11.3.2 Solution

Define an ID selector for a style rule and assign that same selector name to the id attribute of an element. An ID selector name is preceded by a hash mark (#), as in the following example:

#special {border:5px; border-style:ridge; border-color:red}

This rule applies to the following element:

<div id="special>...</div>

When you create your HTML, assign an identifier to no more than one element on the page. Duplicate identifiers assigned to id attributes of multiple elements just confuse scripts.

11.3.3 Discussion

ID names are entirely up to you, but you should follow the same restrictions for these identifiers as those detailed for class names in Recipe 11.2. Be aware that if an element has both a class and id value assigned to it and those names have style rules associated with them, the style rule for the id takes precedence over the one for the class value wherever a conflict arises. This should be of concern to you only if the style rules for both the class and id values adjust the same style properties.

11.3.4 See Also

Recipe 11.3 for class selectors; Recipe 11.9 about overriding style rules; Recipe 4.1 for script identifier naming conventions that apply to id attributes.