WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Defining Sibling Selectors

A sibling selector is a style selector that identifies all HTML tags of a particular type that follow a tag of another type but aren't the children of this tag. Consider a paragraph tag that follows a first-level head inside a table cell. The paragraph isn't the child of the header, since the paragraph tag doesn't appear inside the header tag. These tags are siblings instead, like brother and sister. Their common parent is the table cell that encloses them both:

<td>
<!-- This table cell is the proud parent of these two children. -->
<h1>I am the older sibling. I am way too serious for my own good.</h1>
<p>I am the younger sibling. I always get my own way.</p>
</td>

So to select all paragraphs that follow first-level headers, use this syntax:

older-sibling + younger-sibling

for a style rule that looks like this:

h1 + p {
font-weight: bold;
}

Paragraphs that follow first-level heads display in boldface, while other kinds of paragraphs don't, as Figure 45.4 shows.

Notice that the second paragraph under the first-level head doesn't acquire the boldface style. Why? Because, technically, this paragraph follows a paragraph, not a first-level head. A sibling selector only selects the tag immediately after it, and then only when the second tag isn't the child of the first tag. So the following style rule:

td + em {
font-weight: bold;
}

has no effect on the following block of HTML:

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

As with the other selectors, you can get super-anal about your level of precision. This style rule affects only those paragraphs that follow fourth-level heads that follow third-level heads that follow second-level heads that follow first-level heads:

h1 + h2 + h3 + h4 + p {
font-weight: bold;
}