CSS 콤비네이터

콤비네이터

CSS 셀렉터는 둘 이상의 단순 셀렉터를 포함할 수 있습니다. 간단한 셀렉터 사이에 콤비네이터를 포함할 수 있습니다.

CSS에는 네 가지 다른 조합이 있습니다.

자손 섹렉터는 지정된 요소의 하위 요소인 모든 요소와 일치합니다.

다음 예제에서는 <div> 요소 내부의 모든 <p> 요소를 선택합니다.

div p {
  background-color: yellow;
}

자식 섹렉터는 지정된 요소의 자식인 모든 요소를 선택합니다.

다음 예제에서는 <div> 요소의 하위 요소인 모든 <p> 요소를 선택합니다.

div > p {
  background-color: yellow;
}

인접 형제 섹렉터는 다른 특정 요소 바로 뒤에 있는 요소를 선택하는 데 사용됩니다.

형제 요소는 동일한 상위 요소를 가져야 하며 “인접”은 “바로 다음”을 의미합니다.

다음 예제에서는 <div> 요소 바로 뒤에 배치되는 첫 번째 <p> 요소를 선택합니다.

div + p {
  background-color: yellow;
}

일반 형제 셀렉터는 지정된 요소의 다음 형제인 모든 요소를 선택합니다.

다음 예제에서는 <div> 요소의 다음 형제인 모든 <p> 요소를 선택합니다.

div ~ p {
  background-color: yellow;
}