이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!
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
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 | 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.