CSS 결합자

자손 결합자

첫 번째 선택자의 아래에 존재하는 모든 두 번째 선택자 선택

단일 공백(" ")으로 표시

body div { background-color: red;}

 

자식 결합자

첫 번째 선택자의 바로 아래에 존재하는 모든 두 번째 선택자 선택

보다 큼 기호(>)로 표시

body > div { background-color: red;}

 

인접 형제 결합자

첫 번째 선택자의 바로 뒤에 오는 요소가 두 번째 선택자와 일치하면 선택

더하기 기호(+)로 표시

제목(h1) 바로 뒤에 오는 단락(p) 선택

h1 + p { color: #ccc;}

 

일반 형제 결합자

첫 번째 선택자의 형제 중 두 번째 선택자와 일치하면 선택

물결표(~)로 표시

제목(h1) 과 형제 관계인 모든 단락(p) 선택

 

h1 ~ p { color: #ccc;}