CSS 결합자

결합자는 여러 선택자간의 관계를 설명하는 것입니다.

CSS선택자는 둘 이상의 선택자가 포함될 수 있습니다. 간단히 선택자 사이에는 결합자를 포함할 수 있습니다.

CSS3에는 네가지 결합자가 있습니다.

• 자손 선택자 (여백)
  
• 자식 선택자 (>)
  
• 인접 형제 선택자(+)
  
• 일반 형제 선택자(~)
  

자손 선택자

자손 선택자는 지정된 요소의 자손 항목인 모든 요소를 찾습니다.

다음 예는 <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;
}