두 개 이상의 기본 선택자를 조합하여 더 구체적인 요소를 선택하도록 해주는 선택자

복합 선택자(결합자)

그룹 선택자(다중 선택자, or)

.example1, .example2 { // 모든 example1 클래스 또는 example2 클래스에 대해
	color: red;
}

• 선택자 사이에 콤마(,)를 사용해 여러 요소를 동시에 선택할 수 있다.

일치 선택자(복합 클래스 선택자, and)

section.example1.example2 { // 모든 class="example1 example2"인 section 태그인 요소에 대해
	color: red;
}

• 선택자 사이에 온점. 을 사용해 여러 조건을 동시에 만족하는 요소를 선택
• (태그).(클래스명)과 같이 쓸 경우 클래스명에 해당하는 태그를 선택한다.

자손, 자식 요소(포함 관계 = 수직 관계)

• 자식 요소: 해당 요소의 바로 하위 요소
• 자손 요소: 해당 요소의 바로 하위 요소, 그 하위 요소, …

자식 선택자

.example1 > * { // .example1의 *자식 요소 모두에 대해
	color: red;
}

.example1 > example2 > * { // .example1의 자식인 .example2의 자식 요소 모두에 대해
	color: red;
}

• 각 선택자 사이에 결합자 > 를 사용해 해당 요소의 자식 요소를 선택한다.

자손 선택자

.example1 * { // .example1의 *자손 요소 모두에 대해
	color: red;
}

.example1 .example2 p { // .example1의 자손 중, .example2의 자손 중, p 태그인 요소 모두에 대해
	color: red;
}

• 각 선택자 사이에 결합자 공백을 사용해 해당하는 자손 요소를 선택한다.

형제 요소(수평 관계)

• 형제 요소: 해당 요소와 같은 부모 요소를 가지는 모든 요소

인접 형제 선택자

.example5 h1 + p{ // .example5의 자손 중 h1 태그의 바로 다음에 오는(인접한) 형제 p 태그 선택
	color: red;
}

• 결합자 + 기호를 사용해 특정 요소의 바로 뒤에 나오는 형제 요소 하나를 선택한다.
• h1과 p 태그 사이에 어떠한 요소라도 존재할 시 선택되지 않음

일반 형제 선택자

.example6 h1 ~ p { // .section6의 자손 중 h1 태그의 형제 p 태그 모두 선택
	color: red;
}

• 결합자 ~ 기호를 사용해 특정 요소의 모든 형제 요소를 선택한다.