CSS 다음 형제 선택자 (+) – 요소 바로 뒤에 있는 타깃 형제 요소를 선택

다음(Next) 형제 선택자 : 선택자A `+` 선택자B

다음 형제 선택자(Next-sibling combinator, +)는
앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다.

선택자A + 선택자B 형태의 선택자로,
두 개의 복합 선택자를 구분하는 플러스 기호(+)가 있으며 선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택합니다.
(이 두 선택자는 모두 같은 부모 요소의 자식 요소입니다.)

구문

예제

다음의 예제에서는 <h2> 요소 바로 다음에 위치한 타깃 형제 요소인 <p> 요소만을 선택하여 스타일을 지정합니다.

HTML

<article>
    <h2>CSS 다음 형제 선택자</h2>
    <p>앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다.</p>
    <p>이 후에 위치한 타깃 형제 요소는 선택하지 않습니다.</p>
</article>

두 개의 복합 선택자를 구분하는 플러스 기호(+)의 앞과 뒤의 띄어쓰기는 선택사항이지만 시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다.

CSS

/* 플러스 기호(+) 앞과 뒤의 띄어쓰기는 선택사항이지만
   시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다. */
   
h2+p { /* 권장하지 않음 */
    background-color: yellowgreen;
}
h2 + p { /* 권장함 */
    background-color: yellowgreen;
}

이후(Subsequent) 형제 선택자 : 선택자A `~` 선택자B

앞에서 지정한 요소 이후에 위치한 모든 타깃 형제 요소를 선택하려면 이후 형제 선택자(Subsequent-sibling combinator, ~)를 사용하세요.

구문

예제

다음의 예제에서는 <h2> 요소 이후에 위치한 모든 타깃 형제 요소인 <p> 요소를 선택하여 스타일을 지정합니다.

HTML

<article>
    <h2>CSS 이후 형제 선택자</h2>
    <h3>h3</h3>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <div>
        <p>형제 요소가 아닌 타깃 요소는 선택하지 않습니다.</p>
    </div>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
</article>