✦ 선택자들의 결합
CSS는 여러 선택자를 결합하여 더 세밀하게 요소를 선택할 수 있다.
1. 하위 선택자 결합( ⬅️ 공백)
스페이싱(공백)을 사용하여 두 선택자를 결합한다.
- 앞과 뒤는 모든 선택자를 사용할 수 있다.
- ⭐️ 부모에서 자식으로 내려가는 형태이기 때문에
자식요소 부모요소의 형태는 사용할 수 없다.
div p {
color: red;
}➡️ div 요소 내의 모든 p 요소에 빨간색 글씨 스타일을 적용한다.
2. 자식 선택자 결합(>)
>를 사용하여 두 선택자를 결합한다.
- 모든 하위 선택자에 스타일이 적용되는 걸 방지하고자 할 때 사용한다.
하위 선택자 결합은부모요소 자식요소의 형태로 사용하기 때문에 해당하는 모든 자식 요소가 선택되지만, 자식 선택자 결합은부모요소 > 자식요소의 형태로 사용하기 때문에 바로 밑의 자식 요소만 선택된다.)
div > p {
color: green;
}➡️ div 요소의 직접적인 자식 중에 p 요소에만 녹색 글씨 스타일이 적용된다.
3. 일반 형제 선택자 결합 (~)
~를 사용하여 두 선택자를 결합한다.
- 뒤의 선택자에 해당하는 모든 형제 요소를 선택한다.
- 참고로 뒤의 선택자는 같은 부모를 가져야 한다.
- 단, 뒤에 들어오는 선택자는 앞에 있는 선택자보다 (HTML 문서 기준으로)순서가 앞에 있으면 안된다.
h1 ~ p {
color: orange;
}➡️ 코드 결과
h1태그 바로 다음에 오는p태그에 주황색 글씨 스타일을 적용한다.
4. 인접 형제 선택자 결합 (+)
+를 사용하여 두 선택자를 결합한다.
- 앞의 선택자의 바로 앞/뒤 형제에만 적용되기 때문에 앞/뒤 형제가 아닌 이상 적용되지 않는다.
HTML문서에 바로 뒤의 형제가 뒤에 적은 선택자라면 스타일이 적용된다.
h1 + p {
color: purple;
}
➡️ h1 태그 뒤에 오는 모든 p 태그에 주황색 글씨 스타일을 적용한다.
5. 그룹화
다양한 요소를 선택하여 동일한 스타일을 적용하고 싶을 때 사용한다.
,를 사용하여 두 개 이상의 선택자를 그룹화하여, 스타일을 적용할 수 있다.
h1, h2, h3 {
color: blue;
}➡️ h1, h2, h3 태그 모두에 파란색 글씨 스타일을 적용한다.
✦ 범용 선택자(Universal Selector)란?
전체 요소의 스타일을 적용할 때 사용한다.
- 이 선택자는 전체 요소를 스타일링하기 때문에 스타일시트 문서 맨 앞에 위치해야 한다.
* {
font-size: 1rem;
}💡 기본적으로 사용하는 선택자들은 범용 선택자를 사용하지만 생략하여 사용하고 있다.
*.클래스_선택자 {
color: red;
}위의 코드에서 범용 선택자를 제외하면, 항상 보던 코드가 나온다.
✔️ 추가적으로 다른 선택자들과 혼합하여 사용할 수 있다.
selector + * {
color: blue;
}
div > * {
color: red;
} 
໒꒰ྀ ˶ • ༝ •˶ ꒱ྀིა