CSS 결합자(Combinator)

CSS에서 **결합자(Combinator)**는 특정 관계를 가지는 요소를 선택할 때 사용됩니다. 결합자를 활용하면 보다 정확하고 효율적인 스타일 적용이 가능합니다.

1️⃣ 결합자의 종류

CSS에서 4가지 주요 결합자가 존재합니다.

2️⃣ 결합자 사용 예제

🔹 자손 결합자 ( )

.container p {
	color: blue;
}

<div class="container">
  <p>이 문장은 파란색입니다.</p>
  <div>
    <p>이 문장도 파란색입니다.</p>
  </div>
</div>

🔹 자식 결합자 (>)

.container > p {
  color: red;
}

<div class="container">
  <p>이 문장은 빨간색입니다.</p>
  <div>
    <p>이 문장은 변경되지 않습니다.</p>
  </div>
</div>

🔹 인접 형제 결합자 (+)

h1 + p {
  font-weight: bold;
}

<div>
	<h1>제목</h1>
	<p>이 문장은 굵게 표시됩니다.</p>
	<p>이 문장은 영향을 받지 않습니다.</p>
<div>

h1 ~ p {
	font-style: italic
}

<div>
	<h1>제목</h1>
	<p>이 문장은 기울임체입니다.</p>
	<p>이 문장도 기울임체입니다.</p>
</div>