CSS 형제 선택자? CSS의 + 및 ~ 기호 사용법 정리

by

CSS 형제 선택자는 어떤 의미일까요? + 기호인 인접 형제 선택자는 바로 뒤에 있는 요소 1개를 선택합니다. ~ 기호인 일반 형제 선택자는 뒤에 있는 모든 같은 요소를 동시에 선택자로 지정합니다.

 

CSS 인접 형제 선택자 : +

A + B

인접 형제 선택자는 + 기호를 사용하며, A와 B가 같은 계층에 있을 때 A 바로 뒤에 B를 선택자로 지정합니다.

아래 예제의 경우 <h1> 태그 바로 뒤에 있는 <h2> 태그 1개만 색을 빨강으로 변경시킵니다.

h1 + h2 {
    color : red;
}

 

본문코드

<h1>미국 주식</h1>
<h2>애플</h2>
<h2>테슬라</h2>
<h2>아마존</h2>

 

결과

CSS 인접 형제 선택자 1

 

CSS 일반 형제 선택자 : ~

A ~ B

일반 형제 선택자는 ~ 기호를 사용하며, A와 B가 같은 계층에 있을 때 A 뒤에 있는 모든 B를 선택자로 지정합니다.

아래 예제의 경우 <h1> 태그 뒤에 있는 모든 <h2> 태그의 색을 빨강으로 변경시킵니다.

h1 ~ h2 {
    color : red;
}

 

본문코드

<h1>미국 주식</h1>
<h2>애플</h2>
<h2>테슬라</h2>
<h2>아마존</h2>

 

결과

CSS 일반 형제 선택자 1