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.
former_element + target_element { style properties }
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>
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 |
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.
© 2005–2017 Mozilla Developer Network and individual 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