CSS: The Missing Manual

Styling Tags Within Tags

Choosing whether to style your page with tag selectors or class selectors is a tradeoff. Tag selectors are fast and easy, but they make every occurrence of a tag look the same, which is fine—if you want every <h1> on your page to look exactly like all the rest. Class and ID selectors give you the flexibility to style individual page elements independently, but creating a new CSS style just to change one heading's font takes a heck of a lot more work—and HTML code. What you need is a way to combine the ease of tag selectors with the precision of classes and IDs. CSS has just the thing— descendent selectors.

You use descendent selectors to format a whole bunch of tags in a similar manner (just like tag selectors), but only when they're in a particular part of a Web page. It's like saying, "Hey you <a> tags in the navigation bar, listen up. I've got some formatting for you. All you other <a> tags, just move along; there's nothing to see here."

Descendent selectors let you format a tag based on its relationship to other tags. To understand how it works, you need to delve a little bit more deeply into HTML. On the bright side, the concepts underlying descendent selectors help you understand several other selector types, too, as discussed later in this chapter.

Note

Descendent selectors were called contextual selectors in CSS 1.

The HTML Family Tree

The HTML that forms any Web page is akin to a family tree, where the HTML tags represent various family members. The ...