Selecting Elements by ID or Class

If you've labeled elements with an id or class (see page 63), you can use that criteria in a selector to apply formatting to only those elements that are so labeled.

Figure 9.9. The division with an id of gaudi encloses almost the entire page (everything but the initial h1).

To select elements to format based on their id:

1.	Type # (a hash or pound sign).
2.	With no intervening space, immediately type id, where id uniquely identifies the element to which you'd like to apply the styles.

Figure 9.10. This selector will choose the div element with an id equal to "gaudi".

To select elements to format based on their class:

1.	Type . (a period).
2.	With no intervening space, immediately type label, where label identifies the class to which you'd like to apply the styles.

Tips

• You can use class and id selectors alone or together with other selector criteria. For example, .news {color: red;} would affect all elements with the news class, while h1.news {color: red;} would affect only the h1 elements with the news class.

• For more information on assigning classes to elements in the (X)HTML code, consult Naming Elements on page 63.

  Figure 9.11. The gaudi div, but not the h1 element, is displayed in red.

  

• Class and id selectors are well supported by current browsers.