The Adjacent Sibling Selector

Recall from week 1 that siblings are tags that share the same parent element. Using the document hierarchy from our earlier lecture example, H1, P, and DIV are siblings because they are all children of the BODY tag. Furthermore, B, EM, and SPAN are not siblings. Although they are at the same level of hierarchy, i.e., two levels below the BODY tag, they do not share the same parent. This is much easier to see when the document hierarchy is represented as an outline.

An adjacent sibling is a tag that immediately follows its sibling. Therefore, the adjacent sibling selector is used to target an element that immediately follows a specific sibling.

General Syntax for the Sibling Selector

sibling + targetSibling { declarations... }
sibling+targetSibling { declarations... }

This selector is not supported in Windows IE 6 or below.

Spaces before and after the "+" adjacent sibling selector operator are optional.

Using an adjacent sibling selector, you could for example, give the first paragraph after each heading different formatting from the paragraphs that follow. Let's say that you want to give the paragraph distinct formatting to set it apart as an introductory statement. The following example illustrates this application of the adjacent sibling selector.

Style sheet

h3+p { color: blue; font-style: italic; }

Markup

<h3>Example - All About Sibling Selectors</h3>
 
<p>
  This paragraph is at the same level of hierarchy as the
  H3 tag, and immediately follows it, so this paragraph
  is displayed in blue italic.
</p>
 
<p>However this paragraph is not blue.</p>
 
<p>
  And nor is this paragraph. ONLY the first (or adjacent)
  paragraph following the H3 tag will be blue!
</p>

Rendered Example

Example - All About Sibling Selectors

This paragraph is at the same level of hierarchy as the H3 tag, and immediately follows it, so this paragraph is displayed in blue italic.

However this paragraph is not blue.

And nor is this paragraph. ONLY the first (or adjacent) paragraph following the H3 tag will be blue!

Advanced Selectors