selectorA ~ selectorB {
    /* ... */
}
h2 ~ p {
    background-color: yellowgreen;
}
div {
    border: 1px dashed red;
}
<article>
    <h2>CSS 이후 형제 선택자</h2>
    <h3>h3</h3>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
    <div>
        <p>형제 요소가 아닌 타깃 요소는 선택하지 않습니다.</p>
    </div>
    <p>앞에서 지정한 요소 이후(반드시 바로 뒤에 올 필요는 없음)에 위치한 모든 타깃 형제 요소를 선택합니다.</p>
</article>
브라우저에서 실제 표시된 모습
/* 물결 기호(~, tilde라고도 함) 앞과 뒤의 띄어쓰기는 선택사항이지만
   시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다. */
   
h2~p { /* 권장하지 않음 */
    background-color: yellowgreen;
}
h2 ~ p { /* 권장함 */
    background-color: yellowgreen;
}
selectorA + selectorB {
    /* ... */
}
h2 + p {
    background-color: yellowgreen;
}
<article>
    <h2>CSS 다음 형제 선택자</h2>
    <p>앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다.</p>
    <p>이 후에 위치한 타깃 형제 요소는 선택하지 않습니다.</p>
</article>
브라우저에서 실제 표시된 모습