이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.
이 선택자는 인접 선택자 혹은 다음-형제 선택자라고 합니다. 앞에서 지정한 엘리먼트의 바로 뒤에 있는 지정 엘리먼트만 선택합니다.
문법
former_element + target_element { style properties }
예제
li:first-of-type + li {
color: red;
}
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
또 다른 사용 방법의 예는 <img> 엘리먼트의 뒤에 있는 "caption span"의 스타일을 변경합니다.
img + span.caption {
font-style: italic;
}
위 코드는 다음 <span> 엘리먼트에 매칭됩니다.
<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 |
브라우저 호환성
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 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] 인터넷 익스플로러 7은 선택자에 매칭된 엘리먼트 앞에 어떤 엘리먼트가 동적으로 놓여질 때 스타일을 업데이트 하지 않습니다. 인터넷 익스플로러 8에서는 어떤 링크를 클릭하여 한 엘리먼트를 동적으로 삽입하면, 링크에서 포커싱이 끝날 때까지 첫 번째 자식 스타일이 적용되지 않습니다.