인접 형제 선택자

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

문법

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>

명세

브라우저 호환성

[1] 인터넷 익스플로러 7은 선택자에 매칭된 엘리먼트 앞에 어떤 엘리먼트가 동적으로 놓여질 때 스타일을 업데이트 하지 않습니다. 인터넷 익스플로러 8에서는 어떤 링크를 클릭하여 한 엘리먼트를 동적으로 삽입하면, 링크에서 포커싱이 끝날 때까지 첫 번째 자식 스타일이 적용되지 않습니다.

See also

• General sibling selectors