결합 선택자란?
결합 선택자는 CSS에서 여러 선택자를 조합해서 HTML 요소 간의 관계를 기반으로 더 구체적으로 대상을 선택하는 방법이에요. 기본 선택자(태그, 클래스, ID 등)만으로는 단순히 "무엇"을 선택할지 정할 뿐이지만, 결합 선택자는 "어떤 위치"나 "어떤 관계"에 있는 요소를 골라낼 수 있게 해줍니다.
즉, 결합 선택자는 두 개 이상의 선택자를 "기호"로 연결해서 사용합니다. 이 기호가 요소 간의 관계를 정의해요.
- 예: div p 는 "<div> 안에 있는 <p>"라는 뜻이고, div > p 는 "<div>의 직계 자식인 <p>"라는 뜻이에요.
정리하면 결합 선택자란 요소와 요소 사이의 계층 구조(부모-자식)나 순서(형제 관계)를 활용해서 스타일을 적용하는 도구입니다.
- 결합 선택자의 종류
- 자손 선택자 ( <공백> ): 부모 안의 모든 자손(자식, 손자 등)을 선택. 자식 선택자 ( > ): 부모의 직계 자식만 선택. 인접 형제 선택자 ( + ): 바로 다음에 오는 형제 하나만 선택. 일반 형제 선택자 ( ~ ): 뒤에 오는 모든 형제를 선택.
- 선택자 종류 정리
1번째 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 자손 선택자(하위 선택자) (공백) */
h1 p {
color: green;
}
/* 인접 형제 선택자 ( + ) */
h1 + p {
color: red;
}
/* 일반 형제 선택자 ( ~ ) */
h1 ~ p {
color: blue;
}
</style>
</head>
<body>
<p>가나다라마바사</p>
<h1>여기가 h1 태그야</h1>
<p>가나다라마바사</p>
<p>가나다라마바사</p>
<p>가나다라마바사</p>
<div>
<p>12345678</p>
</div>
</body>
</html>2번째 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 클래스 속성 값 container 모든 자손인 p 태그에 글자 색상을 파란색으로 표시해 */
.container p {
color: blue;
}
/* 클래스 속성 값 container 직계 자식인 p 태그에 글자 굵기를 굵게 표시해 */
.container > p {
font-weight: bold;
}
/* h2 바로 뒤 p 태그를 선택해서 배경 색상을 노란색으로 표시해 */
h2 + p {
background-color: yellow;
}
/* h2 뒤 모든 p 태그를 선택해서 폰트 사이즈를 20px 표시해 */
h2 ~ p {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h3>컨테이너 제목</h3>
<p>컨테이너 문단 1</p>
<span>
<p>중첩된 문단</p>
</span>
</div>
<h2>주요 제목</h2>
<p>문단 A</p>
<p>문단 B</p>
<div>다른 박스</div>
<p>문단</p>
</body>
</html>
'HTML CSS JavaScript' 카테고리의 다른 글
| CSS 선택자(속성 선택자) (0) | 2025.07.14 |
|---|---|
| CSS 선택자(가상 클래스 선택자) (0) | 2025.07.14 |
| CSS 선택자(기본 선택자) (1) | 2025.07.14 |
| CSS 크기와 단위, 색상 (0) | 2025.07.14 |
| CSS(Cascading Style Sheets)란 뭘까? (0) | 2025.07.14 |