CSS 컨텍스트 셀렉터

컨텍스트 셀렉터는 공백 문자 (' ')를 사용하는 명령으로, 지정된 부모 요소 내에 중첩된 태그를 선택할 수 있게 해줍니다.

문법

셀렉터1 셀렉터2 {
	
}

div 태그 안에 있는 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

<div>
	<p>
		텍스트
	</p>
	<p>
		텍스트
	</p>
</div>

div p {
	color: red;
}

#elem 아이디를 가진 요소 내부의 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

<div id="elem">
	<p>
		텍스트
	</p>
	<p>
		텍스트
	</p>
</div>

#elem p {
	color: red;
}

.block 클래스를 가진 요소 내부의 모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:

<div class="block">
	<p>
		텍스트
	</p>
	<p>
		텍스트
	</p>
</div>

.block p {
	color: red;
}

div 태그 안에 있는 p 태그 내부의 모든 b 태그를 선택하여 빨간색으로 칠해 봅시다:

<div>
	<p>
		텍스트 <b>+</b>
	</p>
</div>

div p b {
	color: red;
}