5.2.5 일반 형제 선택자
일반 형제 선택자는 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정합니다. 2개 이상의 선택자를 사용하며, 선택자와 선택자는 ~ 기호로 구분합니다.
형식
이전 선택자 ~ 대상 선택자{/* CSS 코드 */}
다음 코드는 h1 태그와 형제 관계에 있는 모든 요소를 선택자로 지정합니다.
05/02/general_sibling.html
<style>
h1 ~ h2{
color:red;
}
</style>
(중략)
<h1>lorem1</h1>
① <h2>lorem2</h2> <h2>lorem3</h2>
① 이전 요소 다음에 오는 대상 요소가 형제 관계면 적용
그림 5-2 실행결과
TIP | 일반 형제 선택자도 인접 형제 선택자와 마찬가지로 이전 요소 다음에 등장하는 형제 관계의 요소를 대상으로 지정합니다. 이전 요소보다 먼저 등장하는 형제 관계의 요소는 선택자 지정 대상이 아니라는 점을 기억하세요.