연결 선택자 속성

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자

 

- 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다.
- 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소하고 한다.

• 하위 선택자 (descendant selector)
  - 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다.
    (자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.)
  - 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다.
  

  상위요소 하위요소​

• 자식 선택자 (child selector)
  - 자식 요소에만 스타일을 적용하는 선택자
  - 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다.
  

  부모요소 > 자식요소​

 

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자

 

- 부모 요소가 같은 경우 형제 관계라고 한다.
- 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 한다.

• 인접 형제 선택자 (adjacent selector)
  - 형제 요소 중에서 첫 번째 동생 요소만을 선택하는 것
  - 요소 사이에 '+' 기호를 표시한다.
  

  요소1 + 요소2​

• 형제 선택자 (sibling selector)
  - 모든 형제 요소에 적용
  - 요소 사이에 '~' 기호를 표시한다.
  

  요소1 ~ 요소2​