[HTML/CSS] 인접선택자 +와 ~ 사용 설명

이번 글은 인접선택자에 대한 설명글이다.

 

---

 

[ 인접선택자란? ]

인접 선택자인 +와 ~는 특정 요소 뒤에 오는 형제 요소를 선택할 때 사용된다.

둘 다 형제 관계에 있는 요소를 선택할 때 쓰이지만, 선택할 수 있는 요소의 범위가 달라 서로 다른 상황에서 사용된다.

 

---

 

[ 인접선택자 + ]

+는 특정 요소 바로 다음에 오는 형제 요소 하나만 선택할 때 사용된다.

 

아래래 예제에서는 h1 요소 바로 뒤에 나오는 p 요소가 있을 때만 선택하여, 해당 p 요소의 텍스트 색상을 파란색으로 설정합니다.

h1 + p {
    		color: blue;
		}

[ + 사용 예시 ]

특정 요소 뒤의 첫 번째 요소만 스타일을 적용하고 싶을 때
(ex. 제목 요소 바로 뒤에 나오는 설명 문단에만 스타일을 적용하고 싶을 때 유용함)

 

 

---

 

[ 인접선택자 = ]

~는 일반 형제 선택자로, 특정 요소 뒤에 나오는 모든 형제 요소들을 선택할 때 사용된다.

선택자는 중간에 다른 요소가 있어도 동일한 형제 관계에 있다면 모두 선택된다.

 

아래 예제에서는 h1 요소 뒤에 나오는 모든 p 요소를 선택하여 빨간색으로 설정합니다.

h1 ~ p {
    			color: red;
		}

 

 

 

[ = 사용 예시 ]

특정 요소 뒤에 위치한 여러 요소에 동일한 스타일을 적용하고자 할 때
(ex. 하나의 h1 요소 이후에 나오는 모든 문단에 스타일을 적용하고 싶을 때 적합합니다.)

 

 

---

 

[ 요약 정리 ]

따라서, +는 바로 인접한 하나의 형제를, ~는 뒤에 나오는 모든 형제를 선택할 때 사용한다.

 

---