Adjacent sibling selectors

Summary

This is referred to as an adjacent selector. It will select only the specified element that immediately follows the former specified element.

Syntax

former_element + target_element { style properties }

Example

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Another use case might be styling of "caption span"s of the following <img> elements:

img + span.caption {
  font-style: italic;
}

will match the following <span> elements:

<img src="photo1.jpg"><span class="caption">The first photo</span>
<img src="photo2.jpg"><span class="caption">The second photo</span>

Specifications

Browser compatibility

[1] Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

See also

• General sibling selectors