Constructing Selectors

The selector determines which elements a style rule is applied to. For example, if you want to format all p elements with the Times font, 12 pixels high, you'd need to create a selector that identifies just the p elements while leaving the other elements in your code alone. If you want to format the first p in each division with a special indent, you'll need to create a slightly more complicated selector that identifies only those p elements that are the first element in their division.

A selector can define up to five different criteria for choosing the elements that should be formatted:

• the type or name of the element (Figure 9.1),

  Figure 9.1. The simplest kind of selector is simply the name of the type of element that should be formatted, in this case, h1 elements.

  

• the context in which the element is found (Figure 9.2),

  Figure 9.2. This selector uses context. The style will only be applied to the em elements within h1 elements. The em elements found elsewhere are not affected.

  

• the class or id of an element (Figure 9.3),

  Figure 9.3. The first selector chooses all the em elements that belong to the very class. The second selector chooses the one div element with an id of gaudi.

  

• the pseudo-class of an element or a pseudo-element itself (Figure 9.4). (I'll explain that awful sounding pseudo-class, I promise.)

  Figure 9.4. In this example, the selector chooses a elements that belong to the link pseudo-class (in English this means the a elements that haven't yet been visited).

  

• and whether or not an element has certain attributes and values (Figure 9.5).

  Figure 9.5. You can use the square brackets to add information to a selector about the desired element's attributes and/or values.

  

  Selectors can include any combination of these five criteria in order to pinpoint the desired elements. Mostly, you use one or two. In addition, you can apply the same declarations to several selectors at once if you need to apply the same style rules to different groups of elements (see page 148).

  The rest of this chapter explains exactly how to define selectors and gives information about which selectors are best supported by current browsers.