CSS: The Missing Manual

Using Descendent Selectors

Descendent selectors are a powerful tool for efficient Web site building. As discussed in Chapter 3, they let you pinpoint the tags you want to style with greater accuracy than tag styles and with less work than class styles. Most of the time you want to format all the links in a navigation bar the same way, but that doesn't mean you want to format all of the links in the entire page the same way. What you need is a way to say (in CSS) "format only the links in the nav bar this way" without having to apply a class style to each of those links. In other words, you need the ability to format the same HTML in different ways depending on where it's located—and that's exactly what descendent selectors offer (see Figure 14-6).

Figure 14-6. The same HTML was pasted into both the left sidebar and the larger right area of this Web page. By using descendent selectors, identical HTML tags (<h1>, <p>, <ul>, and <li>) are formatted differently based solely on where they're located on the page.

Compartmentalize Your Pages

One of your biggest allies in using descendent selectors effectively is the < div> tag. Since this HTML tag lets you create logical divisions in a page, you can use it to identify different layout elements like a banner, a sidebar, a column of text, and so on. As discussed in Section 3.1, you can organize the content of your page into different areas ...