Adjacent sibling selectors

Adjacent sibling selectors will select the sibling immediately following an element.

For example, you may wish to target an <h3> element, but only <h3> elements that immediately follow an <h2> element. This is a commonly used example, as it has a real-world application. There is often too much space between <h2> and <h3> elements when they appear immediately after each other. The code would be:

<body>
<h2>Heading 2 <em>text</em></h2>
<h3>Heading 3 text</h3>
<p>This is <em>text</em> and more <strong>text</strong></p>
</body>

The document tree would be:

document tree showing adjacent sibling selectors

Using the following rule, you can target any <h3> that follows an <h2>:

h2 + h3 {margin: -1em; }

Adjacent sibling selectors also work for inline elements such as <em> and <strong>

document tree showing inline adjacent sibling selectors

Using the following rule, you can target <strong> text that follows <em> text:

em + strong {color: blue; }

Adjacent sibling selectors are not supported by Windows Internet Explorer 5, 5.5 and 6, but are supported by most other standards-compliant browsers.

Further information

Attribute selectors »

Other Max Design articles and presentations
Associated with webstandardsgroup.org