The +
combinator separates two selectors and matches the second element only if it immediately follows the first 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
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 | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | 7.0[1] | (Yes) | (Yes) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 2.1 | (Yes) | (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
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
KadirTopal,
erikadoyle,
jsx,
Jezer,
cvrebert,
Sebastianz,
teoli,
jlanus,
zacharytamas,
motoxer4533,
khs,
FredB,
Sheppy,
dhar,
tregagnon,
tw2113,
BYK,
Miken32,
Wjjohnst
Last updated by:
mfluehr,