Web Design Garage

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 ...