Beginning CSS: Cascading Style Sheets for Web Design, Third Edition

3

Selectors

WHAT YOU WILL LEARN IN THIS CHAPTER:

• How to use class and ID selectors
• How to use the universal selector
• How descendant selectors can be used
• The pseudo selectors used to style links

In this chapter, you learn about the different types of selectors that CSS supports. In Chapter 2, you learned about the type selector, which applies style sheet declarations by using the HTML element's name. Selectors in CSS have spotty support with regard to IE 6; therefore, almost of the examples at this stage are designed to work in all of the browsers you reviewed in Chapter 1. Don't worry! Advanced selectors are discussed in Chapter 14 for those brave enough, or lucky enough, not to have to support IE 6.

We have already seen the type selector in use, that is a selector that references a type of HTML element, so let's continue our discussion of selectors with the most common and widely supported ones: class and ID.

CLASS AND ID SELECTORS

Class and ID selectors are the most widely supported. In fact, they are as widely supported as the type selector introduced in Chapter 2. There are two types of selectors. The class selector, which references the class attribute used on HTML elements, is the more generic of the two, meaning it may encompass many elements in a given document, even elements of different types or purposes. On the other hand, you can use the id attribute on only one element in an HTML document, so we use it in CSS to reference an element that is unique per page. Besides ...