Adjacent sibling selectors

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

Syntax

CSS
former_element + target_element { style properties }

Example

CSS
li:first-of-type + li {
  color: red;
}
HTML
<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:

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

will match the following <span> elements:

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

Specifications

Specification Status Comment
Selectors Level 4
The definition of 'next-sibling combinator' in that specification.
Working Draft  
Selectors Level 3
The definition of 'Adjacent sibling combinator' in that specification.
Recommendation  
CSS Level 2 (Revision 1)
The definition of 'Adjacent sibling selectors' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 7.0[1] (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) ? (Yes) (Yes)

[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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/adjacent_sibling_selectors

CSS CSS Reference NeedsMobileBrowserCompatibility Selectors