CSS 문서 구조를 이용한 선택자

자손 선택자

ex) div span {}

-> 요소의 자손을 찾을 때

-> 공백으로 구분

 

자식 선택자

ex) div > span {}

-> 요소의 자식 요소만 선택

-> > 기호로 구분

 

인접 형제 선택자

ex) div + span {}

-> 인접한 형제 요소만 선택 ( 떨어져 있으면 적용이 되지 않음 )

 

-> 세 선택자를 조합하여 사용할 수 있음