Defining Child Selectors

A child selector is a style selector that identifies all HTML tags of a particular type that have as their immediate parent a tag of another type, like all paragraphs that are the immediate children of table cells. If the tag in question is not the immediate child of the parent tag, your style rule doesn't apply.

The syntax for this type of selector looks like this:

 parent-tag > child-tag 

Separate the tag names with the greater-than sign (>). The following style rule affects only those paragraphs that appear inside table cells:

 td > p {   font-weight: bold; } 

GEEKSPEAK

A child selector is a style selector that identifies all HTML tags of a particular type that have as their immediate parent a tag of another type, such as all paragraphs that are the immediate children of table cells.

The browser leaves all other paragraphs alone, as in Figure 45.3.

Figure 45.3. With a child selector, the browser selects only those tags of a particular type that have as their immediate parents the tags of another type. In this case, only paragraphs that are the children of table cells turn bold.

The exact genealogy of a tag is important here. For a child selector to work, the tag in question must be the immediate child of the parent. So, a style rule that looks like this:

 td > em {   font-weight: bold; } 

TIP

Microsoft Internet Explorer chokes on the example in Figure 45.3, so double-check your child selectors very carefully in IE.

has no effect on the following block of HTML:

 <td>   <p>This is a paragraph with <em>emphasis</em>.</p> </td> 

but works correctly here:

 <td>   This is unformatted text with <em>emphasis</em>. </td> 

Why? In the first case, the immediate child of the table cell is the paragraph tag, not the emphasis tag. Sure, the table cell is the grandparent of the emphasis tag, but that's not the way a child selector works. The emphasis tag has to be the immediate child of the parent tag, as in the second case.

To affect all emphasis tags inside table cells regardless of the exact genealogy, use a contextual selector instead:

 td em {   font-weight: bold; } 

This style rule applies to both previous cases, since, in both cases, the emphasis tag is somewhere inside a table cell.

Back to child selectors: You can give an entire tag genealogy as the selector to get really specific results. This style rule only selects emphasis tags that are the children of h1 tags that are the children of table cells:

 td > h1 > em {   font-weight: bold; }