Advanced Selectors

The CSS 2 guidelines provide a few more powerful selectors that give you even finer control over Web page styling. Like some of the selectors you've seen previously, the selectors in this section don't work in Windows Internet Explorer 6 and earlier. (But you can try the JavaScript workaround in the box in Section 3.6.2.4.)

Child Selectors

Similar to the descendent selectors described earlier in this chapter, CSS lets you format the children of another tag with a child selector. The child selector uses an additional symbol—an angle bracket (>) to indicate the relationship between the two elements. For example, the selector body > h1 selects any <h1> tag that's a child of the <body> tag.

Unlike a descendent selector, which applies to all descendents of a tag (children, grandchildren, and so on), the child selector lets you specify which child of which parent you mean. For example, in Figure 3-6, there are two <h2> tags. Using a plain old descendent selector—body h2—selects both <h2> tags. Even though both <h2> tags are inside of the <body> tag, though, only the second one is a child of the <body> tag. The first <h2> is directly inside of a <div> tag, so its parent is <div>. Since the two <h2> tags have different parents, you can use a child selector to get at them individually. To select only the second <h2> tag, your child selector looks like this: body > h2. If you want the first <h2> tag, then you must use this child selector instead: div > h2.

Figure 3-6. The ...

Get CSS: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.