CSS: Grouping Selectors

By Richard York

You can group multiple selectors together in a single rule by providing a comma after each selector; this is illustrated in Figure 2-5. The result is that a rule applies to more than one selector at a time.

Figure 2-5

The rule in Figure 2-5 applies to the HTML elements,

Save this as Example_2-1.html.

Fire up your favorite browser and load the file. Figure 2-6 shows how CSS selects the different headings in the body of the HTML document to apply style.

Figure 2-6

How It Works

In Figure 2-6 you see the hierarchy of a style sheet, drilling down from the whole style sheet to the value of a property. In Example 2-1, you included a single CSS rule with a selector that provides properties for all six HTML heading elements,

,

,

,

,

, and

. The selector contains three declarations that provide the browser with information about how to style the aforementioned heading elements. The browser is told to give each heading text colored maroon in the sans-serif font face, and a bottom border that’s gray, solid, and one pixel thick.