인접 형제 선택자

인접선택자 : 바로 뒤에 있는 요소를 선택 할 수 있다. (+,~)

 

+ : A 선택자와 인접한 B 선택자만 선택

~ : A 선택자와 함께 있는 B 선택자 모두를 선택

 

 

ex)

<div>

<p>안녕하세요</p>

<p>안녕하세요</p>

<span>안녕하세요</span>

<span>안녕하세요</span>

<p>안녕하세요</p>

</div>

 

<style>

p + p {color:#f00} : 첫번째 p 태그 바로 뒤에 인접한 P 태그만 : 첫번째 p  태그는 포함하지 않는다.

p ~ p {color:#f00} : 첫번째 p 태그 뒤에 오는 모든 p 태그 : 첫번째 p  태그는 포함하지 않는다.

 

</style>

 

 

*부모 + 자식 관계에서는 인접 선택자 사용 불가