CSS에서 id 사용하기

id를 사용할 때는 이전 강의에서 배운 모든 선택자 조작을 사용할 수 있습니다.

예제

다음과 같은 코드가 있다고 가정해 봅시다:

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

id가 block인 요소 안에 있는 h2를 선택하고 빨간색으로 만들어 봅시다:

#block h2 {
	color: red;
}

이제 id가 block인 요소 안에 있는 p를 선택하고 초록색으로 만들어 봅시다:

#block p {
	color: green;
}

예제

이제 다음과 같은 코드가 있다고 가정해 봅시다:

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

id가 block인 요소 안에 있는 클래스 header를 가진 모든 요소를 선택하고 빨간색으로 만들어 봅시다:

#block .header {
	color: red;
}

이제 id가 block인 요소 안에 있는 클래스 header를 가진 h2 제목을 선택하고 빨간색으로 만들어 봅시다:

#block h2.header {
	color: red;
}

실습 문제

id가 elem인 요소 안에 있는 모든 h2를 선택하는 선택자를 작성하세요. 다음 코드에서 선택자를 테스트해 보세요:

<div id="elem">
	<h2>Choose</h2>
	<p>---</p>
	
	<h2>Choose</h2>
	<p>---</p>
</div>

<h2>Do not +++</h2>
<p>---</p>

id가 elem인 요소 안에 있는 클래스 text를 가진 모든 요소를 선택하는 선택자를 작성하세요. 다음 코드에서 선택자를 테스트해 보세요:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

id가 elem인 요소 안에 있는 클래스 text를 가진 모든 단락을 선택하는 선택자를 작성하세요. 다음 코드에서 선택자를 테스트해 보세요:

<div id="elem">
	<p class="text">+++</p>
	<p class="text">+++</p>
	
	<ul>
		<li class="text">---</li>
		<li class="text">---</li>
		<li class="text">---</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>

id가 elem인 요소 안에 있는 클래스 text를 가진 모든 li를 선택하는 선택자를 작성하세요. 다음 코드에서 선택자를 테스트해 보세요:

<div id="elem">
	<p class="text">---</p>
	<p class="text">---</p>
	
	<ul>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li class="text">+++</li>
		<li>---</li>
		<li>---</li>
	</ul>
</div>

<p class="text">---</p>