CSS 입문 | CSS 선택자 | 형제 선택자

형제 선택자(sibling selector)

행제 선택자는 형제 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

형제 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미한다. 이러한 형제 관계에 있는 요소들을 형제(sibling) 요소라고 한다.

일반 형제 선택자(general sibling selector)

일반 형제 선택자는 해당 요소와 형제 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그와 형제 관계에 있는 요소 중에서 <div>태그보다 뒤에 존재하는 <p>태그를 모두 선택하는 예제이다.

div ~ p {스타일;}

<style>
    div ~ p { background-color: #FFE4E1; }
</style>

인접 형제 선택자(adjacent sibling selector)

영어로 adjacent는 인접한, 가까운 이라는 의미가 있다. 인접 형제 선택자는 해당 요소와 형제 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그와 형제 관계에 있는 요소 중에서 <div>태그의 바로 뒤에 존재하는 <p>태그를 모두 선택하는 예제이다.

div + p {스타일;}

<style>
    div + p { background-color: #FFE4E1; }
</style>