Section 3.4. Styling Tags Within Tags | Dreamweaver CS3: The Missing Manual

3.4. 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 fineif 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 workand 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.

3.4.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 first HTML tag you use on a pagethe <html> tagis like the grandpappy of all other tags. The <html> tag surrounds the <head> tag and the <body> tag, which makes <html> the ancestor of both. Similarly, a tag inside of another tag is a descendent . The <title> tag in the following example is the <head> tag's descendent:

 <html>  <head>   <title>A Simple Document</title>  </head>  <body>   <h1>Header</h1>   <p>A paragraph of <strong>important</strong>text.</p>  </body> </html>

You can turn the above HTML code into a diagram, like Figure 3-4, showing the relationships between the page's tags. First there's the <html> tag; it's divided into two sections represented by the <head> and <body> tags. Those two tags contain other tags that in turn may contain other tags. By seeing which tags appear inside which other tags, you can diagram any Web page.

Figure 3-4. HTML consists of nested tagstags within tags within even more tags. The relationship between these tagshow they're nested within each otherforms a kind of family tree.

Tree diagrams help you figure out how CSS sees the relationship of one element on a page to another. Many of the selectors in this chapter, including descendent selectors, rely on these relationships. The most important relationships are:

Ancestor . As explained at the beginning of this chapter, an HTML tag that wraps around another tag is its ancestor. In Figure 3-4, the <html> tag is an ancestor of all other tags, while the <body> tag is an ancestor for all of the tags inside of it the <h1>, <p>, and <strong> tags.
Descendent . A tag inside one or more tags is a descendent. In Figure 3-4, the <body> tag is a descendent of the <html> tag, while the <title> tag is a descendent of both the <head> and <html> tags.
Parent . A parent tag is the closest ancestor of another tag. In Figure 3-4, a parent is the first tag directly connected to and above another tag. Thus, the <html> tag is the parent of the <head> and <body> tags, but of no other tags. And, in this diagram, the <p> tag is the parent of the <strong> tag.
Child . A tag that's directly enclosed by another tag is a child. In Figure 3-4, both the <h1> and <p> tags are children of the <body> tag, but the <strong> tag isn'tsince that tag is directly wrapped inside the <p> tag.
Sibling . Tags that are children of the same tag are called siblings , just like brothers and sisters. In an HTML diagram, sibling tags are next to each other and connected to the same parent. In Figure 3-4, the <head> and <body> tags are siblings, as are the <h1> and <p> tags.

Thankfully, that's where CSS 2.1 draws the line with this family metaphor, so you don't have to worry about aunts, uncles, or cousins. (Though rumor has it CSS 10 will include in-laws.)

3.4.2. Building Descendent Selectors

Descendent selectors let you take advantage of the HTML family tree by formatting tags differently when they appear inside certain other tags or styles. For example, say you have an <h1> tag on your Web page, and you want to emphasize a word within that heading with the <strong> tag. The trouble is, most browsers display both heading tags and the <strong> tag in bold, so anyone viewing the page can't see any difference between the emphasized word and the other words in the headline. Creating a tag selector to change the <strong> tag's color and make it stand out from the headline isn't much of a solution: you end up changing the color of every <strong> tag on the page, like it or not. A descendent selector lets you do what you really wantchange the color of the <strong> tag only when it appears inside of an <h1> tag.

The solution to the <h1> and <strong> dilemma looks like this:

 h1 strong { color: red; }

Here any <strong> tag inside an h1 is red, but other instances of the <strong> tag on the page, aren't affected.

Descendent selectors style elements that are nested inside other elements, following the exact same pattern of ancestors and descendents as the tags in the HTML family tree.

You create a descendent selector by tacking together selectors according to the part of the family tree you want to format, with the most senior ancestor on the left, and the actual tag you're targeting on the far right. For example, in Figure 3-5 notice the three links (the <a> tag) inside of bulleted list items, and another link inside of a paragraph. To format the bulleted links differently than the other links on the page, you can create the following descendent selector:

 li a { font-family: Arial; }

Figure 3-5. This simple tree diagram (right) represents the structure of the Web page pictured to the left. Every tag on a Web page is a descendent of the <html> tag, since <html> wraps around them all. A tag can descend from multiple tags. For example, the first <a> tag listed in this diagram is a descendent of the <strong>, <p>, <body>, and <html> tags.

This rule says, "Format all links ( a ) that appear inside a list item ( li ) by using the Arial font." A descendent selector can contain more than just two elements. The following are all valid selectors for the <a> tags inside of the bulleted lists in Figure 3-5:

 ul li a body li a html li a html body ul li a

Note: One reason you would tack on additional descendent selectors is if you've written several different rules that simultaneously format a tag. Formatting instructions from a long-winded descendent selector can override simple class or tag styles. More on that in the next chapter.

These four selectorsall of which do the same thingdemonstrate that you don't have to describe the entire lineage of the tag you want to format. For instance, in the second example body li aul isn't needed. This selector works as long as there's an <a> tag that's a descendent (somewhere up the line) of an <li> tag (which is also a descendent of the <body> tag). This selector can just as easily apply to an <a> that's inside of an <em> tag, that's inside of a <strong> tag, that's inside an <li> tag, and so on.

You're not limited to just tag selectors, either. You can build complex descendent selectors combining different types of selectors. For example, suppose you want your links to appear in yellow only when they're in introductory paragraphs (which you've designated with a class style named intro ). The following selector does the trick:

 p.intro a { color: yellow; }

Quick translation: Apply this style to every link ( a ) that's a descendent of a paragraph ( p ) that has the intro class applied to it. Note that there's no space between p and .intro , which tells CSS that the intro class applies specifically to the <p> tag.

If you add a space, you get a different effect:

 p .intro a { color: yellow; }

This seemingly slight variation selects an <a> tag inside of any tag styled with the .intro class, that's itself a descendent of a <p> tag.

Leaving off the ancestor tag name (in this case the p ) provides a more flexible style:

 .intro a {color: yellow; }

This selector indicates any <a> tag inside of any other tag<div>, <h1>, <table>, and so onwith the .intro class applied to it.

Descendent selectors are a very powerful weapon in your CSS arsenal. You can find many more powerful ways to use them in Chapter 14.