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.
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.
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.
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.