CSS 선택자 - 조합선택자(후손,자식,형제)

 

후손?자손?자식?

 

L 후손선택자 R 자식선택자

1. 후손선택자 = 자손선택자 = 하위선택자

  - 자식을 포함하는 의미 = 계층구조에서 하위에 오는 모든 자손선택

  - 선택자 : 공백(스페이스바 한번)

  → 사진이 의미하는 것 : #container ul

 

2. 자식선택자

  - 앞 요소의 자식인 뒷요소를 선택 = 직계 자식만을 선택

  - 선택자 : >

  → 사진이 의미하는 것 : #container > ul

 

📢 참고 후손보다는 자식을 많이 사용한다 (사용자 위주로 생각하기)
            요소의 가중치를 둬야하는지 항상 생각하면서 선택자 쓰기

 

 

인접형제선택자

일반형제선택자

 

3. 동위선택자 = 형제선택자

  - 같은 부모를 가진 요소들 = 계층구조에서 요소 바로 다음에 오는 요소선택

  - 선택자 : +, ~

  - 인접형제선택자(+) : 앞의 요소 바로 뒤에 있는 요소만선택

  → 사진이 의미하는 것 : p + ul

  - 일반형제선택자(~) : 앞요소 뒤에 있는 모든 요소를 선택

  → 사진이 의미하는 것 : p ~ ul