MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이 선택자는 인접 선택자 혹은 다음-형제 선택자라고 합니다. 앞에서 지정한 엘리먼트의 바로 뒤에 있는 지정 엘리먼트만 선택합니다.

문법

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

브라우저 호환성

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에서는 어떤 링크를 클릭하여 한 엘리먼트를 동적으로 삽입하면, 링크에서 포커싱이 끝날 때까지 첫 번째 자식 스타일이 적용되지 않습니다.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: neatnet
 최종 변경: neatnet,