CSS의 자식 선택자

자식 선택자 >는 요소가 서로 직접적으로 중첩된 관계를 기준으로 요소를 선택할 수 있게 합니다.

문법

선택자1 > 선택자2 {
	
}

예제

p 태그 안에 직접 위치한 모든 b 태그를 찾아 빨간색으로 칠해 봅시다:

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

예제

.block 클래스를 가진 요소 안에 직접 위치한 모든 b 태그를 찾아 빨간색으로 칠해 봅시다:

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

예제

.block 클래스를 가진 요소 안에 직접 위치한 모든 .elem 클래스를 가진 요소를 찾아 빨간색으로 칠해 봅시다:

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

같이 보기

하위 선택자,
부모 요소를 기준으로 요소를 선택할 수 있습니다
인접 형제 선택자,
형제 요소를 기준으로 요소를 선택할 수 있습니다
일반 형제