combinators 셀렉터 조합

4가지의 셀렉터 조합이 있다.

  • 자손(descendant) 셀렉터 (space)
  • 자식(child) 셀렉터
  • 인접한 형제 셀렉터 (+)
  • 두루두루의 형제 셀렉터 (~)

descendant 셀렉터

특정 요소의 자손인 모든 요소와 매치되는 셀렉터이다.

아래 예시는 div 태그 내부의 모든 p 태그를 선택하는 예시이다.

1
2
3
div p {
  background-color: yellow;
}

child 셀렉터

해당 요소의 모든 자식들을 선택하는 셀렉터이다.

아래 예시는 div 태그 내부의 모든 p 태그 자식들을 선택한다.

1
2
3
div > p {
  background-color: yellow;
}

child와 descendet의 차이는 descendent는 자신 내부의 모든 자식 손자 증손자 등 모든 자손을 포함하지만, child는 딱 1 level의 자식들만 선택한다.

인접한 형제 셀렉터 (+)

다른 요소와 직접적으로 인접한 요소를 선택하기 위해 사용된다.

1
2
3
div + p {
  background-color: yellow;
}

두루두루 형제 셀렉터 (~)

같은 레벨에 있는 형제 요소를 모두 선택한다.

1
2
3
div ~ p {
  background-color: yellow;
}