CSS 이웃 형제 선택자

연속 형제 선택자(Adjacent sibling selector)는 다른 요소 뒤에 나타나는 요소를 선택할 수 있으며, 두 요소는 공통된 부모 요소를 가집니다.

연속 형제 선택

다른 요소 뒤에 나타나는 요소를 선택하고, 두 요소가 공통된 부모 요소를 가지고 있다면, 연속 형제 선택자(Adjacent sibling selector)를 사용할 수 있습니다.

예를 들어, h1 요소 뒤에 나타나는段落의 상단 간격을 늘리려면 다음과 같이 작성할 수 있습니다：

h1 + p {margin-top:50px;}

이 선택자는 “h1 요소 뒤에 나타나는段落을 선택합니다. h1과 p 요소는 공통된 부모 요소를 가집니다.”라고 읽습니다.

자신이 직접 시도해보세요

문법 설명

연속 형제 선택자는 플러스 기호 (+)를 사용합니다. 즉, 연속 형제 결합 기호(Adjacent sibling combinator)입니다.

주석：자식 결합 기호와 마찬가지로, 연속 형제 결합 기호 옆에 공백 문자가 있을 수 있습니다。

아래에 나타난 문서 트리 단편을 확인해 주세요：

<div>
  <ul>
    <li>리스트 아이템 1</li>
    <li>리스트 아이템 2</li>
    <li>리스트 아이템 3</li>
  </ul>
  <ol>
    <li>리스트 아이템 1</li>
    <li>리스트 아이템 2</li>
    <li>리스트 아이템 3</li>
  </ol>
</div>

위의 단편에서 div 요소는 두 개의 목록을 포함하고 있습니다: 하나는 불순서 목록이고, 하나는 순서 목록입니다. 각 목록은 세 개의 목록 항목을 포함하고 있습니다. 이 두 목록은 이웃 형제이며, 목록 항목도 이웃 형제입니다. 그러나 첫 번째 목록의 목록 항목과 두 번째 목록의 목록 항목은 이웃 형제가 아니며, 이 두 그룹의 목록 항목은 같은 부모 요소에 속하지 않기 때문에 (가장 많아도 조카 형제일 뿐)입니다.

결합 기호를 사용하여 두 개의 이웃 형제 중 두 번째 요소만 선택할 수 있습니다. 다음의 선택자를 참조하세요:

li + li {font-weight:bold;}

위의 선택자는 목록 중 두 번째와 세 번째 목록 항목만 두껍게 만듭니다. 첫 번째 목록 항목은 영향을 받지 않습니다.

자신이 직접 시도해보세요

다른 선택자와 결합

이웃 형제 결합 기호는 다른 결합 기호와도 결합될 수 있습니다:

html > body table + ul {margin-top:20px;}

이 선택자는 다음과 같이 설명됩니다: table 요소 후에 나타나는 모든 형제 ul 요소를 선택합니다. 이 table 요소는 body 요소에 포함되어 있으며, body 요소는 html 요소의 자식 요소입니다.