CSS에서 id 사용하기

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

예제

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

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

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

css#block h2 {
  color: red;
}

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

css#block p {
  color: green;
}

예제

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

html<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를 가진 모든 요소를 선택하고 빨간색으로 만들어 봅시다:

css#block .header {
  color: red;
}

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

css#block h2.header {
  color: red;
}

실습 문제

Задание 1

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

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

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

Задание 2

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

html<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>

Задание 3

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

html<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>

Задание 4

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

html<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>