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

이후 형제 선택자(Subsequent-sibling combinator, ~)는
앞에서 지정한 요소 이후에 위치한 모든 타깃 형제 요소를 선택합니다.

선택자A ~ 선택자B 형태의 선택자로,
두 개의 복합 선택자를 구분하는 물결 기호(~, tilde라고도 함)가 있으며 선택자A 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소인 선택자B를 선택합니다.
(이 두 선택자는 모두 같은 부모 요소의 자식 요소입니다.)

구문

CSS 
selectorA ~ selectorB {
    /* ... */
}

예제

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

CSS 
h2 ~ p {
    background-color: yellowgreen;
}
div {
    border: 1px dashed red;
}
HTML 
<article>
    <h2>CSS 이후 형제 선택자</h2>
    <h3>h3</h3>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <div>
        <p>형제 요소가 아닌 타깃 요소는 선택하지 않습니다.</p>
    </div>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
</article>
브라우저에서 실제 표시된 모습

두 개의 복합 선택자를 구분하는 물결 기호(~, tilde라고도 함)의 앞과 뒤의 띄어쓰기는 선택사항이지만 시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다.

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

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

앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택하려면 다음 형제 선택자(Next-sibling combinator, +)를 사용하세요.

구문

CSS 
selectorA + selectorB {
    /* ... */
}

예제

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

CSS 
h2 + p {
    background-color: yellowgreen;
}
HTML 
<article>
    <h2>CSS 다음 형제 선택자</h2>
    <p>앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다.</p>
    <p>이 후에 위치한 타깃 형제 요소는 선택하지 않습니다.</p>
</article>
브라우저에서 실제 표시된 모습

브라우저 호환성

이후 형제 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
선택자A ~ 선택자B 1 12 1 3

명세서

이후 형제 선택자의 명세서 사양
명세서 사양
선택자A ~ 선택자B Selectors Level 4
#general-sibling-combinators

참고문헌

같이 보기