CSS 결합자(Combinators) 완벽 정리: 자손·자식·인접 형제·일반 형제

TL;DR

• CSS 결합자(Combinators)는 선택자 사이의 관계를 나타냅니다.
• 공백(자손), >(자식), +(인접 형제), ~(일반 형제) 네 가지가 있습니다.
• 자손은 모든 하위 요소, 자식은 바로 아래 한 단계, 인접 형제는 바로 다음 형제 하나, 일반 형제는 같은 부모 아래 뒤따르는 모든 형제를 선택합니다.

CSS로 스타일링을 하다 보면 다양한 선택자를 사용하게 됩니다. 그중 평소에 잘 쓰지 않아 개념이 모호했던 선택자가 있어, 이번 기회에 확실하게 정리해 보려고 합니다.

CSS Combinators(결합자)란?#

CSS 결합자는 선택자들 사이의 관계를 나타내는 표기입니다. 총 4가지가 있으며 공백, >, +, ~ 로 관계를 표현합니다.

자손 선택자#

요소들을 공백으로 이어 주는 결합자입니다. div 안에 자식으로 들어 있는 모든 p를 선택합니다.

예시#

복사
//CSS
div p {
  font-size:2rem;
}

// HTML
<div>
  <p>This is a paragraph.</p> // 이곳
  <p>This is a paragraph.</p> // 이곳
	<div>
		<p>This is a pararagph</p> // 이곳
		<p>This is a pararagph</p> // 이곳
	</div>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

자식 선택자#

요소들을 > 표시로 이어 줍니다. 바로 아래에 있는 자식만 선택합니다.

예시#

복사
//CSS
div > p {
  font-size:2rem;
}

// HTML
<div>
  <p>This is a paragraph.</p> // 이곳 
  <p>This is a paragraph.</p> // 이곳
	<div>
		<p>This is a pararagph</p>
		<p>This is a pararagph</p>
	</div>
</div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

인접 형제 선택자#

요소들을 + 표시로 이어 줍니다. 자신과 인접한 형제 요소 하나만 선택합니다.

예시#

복사
//CSS
div + p {
  font-size:2rem;
}

// HTML
<div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
	<div>
		<p>This is a pararagph</p>
		<p>This is a pararagph</p>
	</div>
</div>
<p>This is a paragraph.</p> // 이곳
<p>This is a paragraph.</p>

일반 형제 선택자#

요소들을 ~ 표시로 이어 줍니다. 자신의 형제에 해당하는 모든 요소를 선택합니다.

예시#

복사
//CSS
div ~ p {
  font-size:2rem;
}

// HTML
<div>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
	<div>
		<p>This is a pararagph</p>
		<p>This is a pararagph</p>
	</div>
</div>
<p>This is a paragraph.</p> // 이곳
<p>This is a paragraph.</p> // 이곳

정리하며#

지금까지 스타일링을 할 때는 자손 선택자와 자식 선택자를 주로 사용하고, 가끔 인접 형제 선택자를 써 왔습니다. 하지만 일반 형제 선택자는 잘 사용하지 않아 개념이 모호했고, 이번 기회에 확실히 공부하려고 정리해 보았습니다. 아직 기초가 탄탄하지 않다고 느꼈으며, 탄탄한 기초를 위해 꾸준히 노력하려 합니다.