결합자

두개 이상의 선택자를 결합하여 선택자 간의 관계를 설명합니다.

자손 결합자 공백

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;
}

해보기
div 요소의 다음에 오는 모든 p 요소를 선택합니다.

그룹 결합자 ,

여러 선택자가 동일한 스타일을 사용하는 경우 선택자들을 하나의 그룹으로 표현합니다.

h1 , div {
    background-color : yellow;
}

해보기
모든 h1 요소 그리고 모든 div 요소를 선택합니다.