CSS Combinators

CSS로 스타일링을 하다보면 선택자들을 사용하게 된다. 하지만 내가 평소에 잘 쓰지 않아 개념이 모호했던 선택자가 있어서 이번 기회에 확실하게 개념을 정리하고자한다.

CSS Combinators(결합자)란?

CSS 파일 내 선택자들 사이에서 관계를 나타내는 것

총 4가지의 Combinators가 존재하며 ( 공백, >, +, ~ )로 관계를 나타낸다.

자손 선택자

요소들을 공백으로 이어주는 결합자이다.

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> // 이곳

느낀점

지금까지 스타일링을 할때는 자손, 자식 선택자를 주로 선택하고 가끔씩 인접 형제 선택자를 사용해왔던 것 같다. 하지만 일반 형제 선택자는 잘 사용하지 않아, 개념이 모호했고 이번 기회에 확실하게 공부하고자 정리를 하였다. 아직 기초가 탄탄하지 않다고 느꼈으며, 탄탄한 기초를 위해 꾸준히 노력해야겠다고 생각했다.