ID Selectors

ID Selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed.

In this lesson, IDs are used to identify unique parts of the document structure, such as the content, navigation, and footer.

In the HTML sample shown in Listing 3.1, there are three IDs: <div id="content">, <div id="nav">, and <div id="footer">. To select <div id="nav">, the #nav selector is used as shown in Listing 3.5.

Listing 3.5. CSS Code Containing the #nav ID Selector

#nav
{
     color: blue;
}

Should You Use ID or Class? Classes can be used as many times as needed within a document. IDs can be applied only once within a document. If you need to use the same selector more than once, classes are a better choice. However, IDs have more weight than classes. If a class selector and ID selector apply the same property to one element, the ID selector's value would be chosen. For example, h2#intro { color: red; } will override H2.intro { color: blue; }.