CSS: ID Selectors

By Richard York

id selectors are unique identifiers; an id is meant to be unique, defined once per document. Like class selectors discussed in the previous section, a special character precedes id selectors in a style sheet. To reference an id, you precede the id name with a hash mark (or pound sign, #). Like class names, this name cannot contain spaces. You should use names that only include letters, numbers, and spaces for compatibility with the older browsers. You see how this is done in Figure 3-8.

Figure 3-8 

Since there’s only one Jupiter in the solar system, Jupiter lends itself as a good example of the concept of an id selector. Just as there is only one Jupiter in the solar system, the id name jupiter can be used only once in a document, on one element.

Browsers are forgiving of multiple id names per document as far as style sheets are concerned. However, using an id name more than once in a document can cause conflicts with other applications of unique id names. For example, id names can be used to link to a location within a document (as HTML anchors), or when referencing an element by id name from JavaScript. When you have an id name appearing more than once in the HTML document, on more than one element, the browser won’t know which one you’re linking to, or which one you want to refer to from JavaScript, and will have to guess. It’s best to just use the id name for its intended purpose, just once per document.

An id name must be unique in so far as other id names are concerned. An id name may be repeated as a class name, should you want to do so.

The element can then be defined in the document using the id attribute. This is demonstrated in Figure 3-9.

Figure 3-9 

You can make both class and id selectors more specific by appending the name of the element to the beginning of the selector. For instance, if in the last examples you only want

elements for each rule, the selector will look like what you see in Figure 3-10.

Figure 3-10 

Now each rule is applied only to

elements that contain the corresponding class and id names. You may wonder why this is useful for an id selector, since an id element has to be unique in a document. Appending the selector with the type of element is useful in situations where one style sheet applies to more than one HTML document, where it’s possible that you have a unique id in one of those documents that applies to for instance, an element, but in another, separate document, that unique id name applies to a

element. Of course, it’s best practice to avoid situations like that by making each element’s id name unique, even in different documents, to avoid confusion. Sometimes, it can’t be avoided. The other reason this is useful is that it makes the style sheet more intuitive and easier to fol-low. When you are reading a style sheet and see the id name jupiter but no type selector, that id can apply to any element in the document and would require you to scan the whole document from top to bottom without any other search criteria. With the type selector appended, you can narrow the search; if the element is a

element, then you know that the id selector doesn’t apply to images, links, paragraphs, and so on.

Although the id must be unique, in these examples you can name only one element jupiter. The CSS style sheet, however, may contain as many references to that id as are necessary. The uniqueness rule only applies to naming the elements, not the references to them. You can apply classes, on the other hand, to as many elements in the body as necessary.