CSS 선택자 조합 실습

Задание 1

div 내부에 위치한 문단을 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <p>
    +++
  </p>
</div>

<p>
  ---
</p>
<p>
  ---
</p>

Задание 2

div 내부에 위치한 모든 h2를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
</div>
<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 3

id가 block인 요소 내의 모든 문단 p를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 4

id가 block인 요소 내의 모든 h2를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>

Задание 5

클래스 bbb를 가진 모든 요소를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
</div>
<div class="bbb">
  +++
</div>

<h2>---</h2>
<p class="bbb">
  +++
</p>

Задание 6

id가 block인 요소 내의 클래스 bbb를 가진 모든 요소를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

Задание 7

클래스 bbb를 가진 모든 문단 p를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  +++
</p>

Задание 8

클래스 bbb를 가진 모든 h2를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p class="bbb">
    ---
  </p>
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

<h2 class="bbb">+++</h2>
<p class="bbb">
  ---
</p>

Задание 9

id가 block인 요소 내의 클래스 bbb를 가진 모든 문단 p를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  <p>
    ---
  </p>
  
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
</div>
<div class="bbb">
  ---
</div>

<h2>---</h2>
<p class="bbb">
  ---
</p>

Задание 10

클래스 bbb와 클래스 xxx를 가진 모든 요소를 동시에 선택하는 선택자를 작성하십시오 (즉, 쉼표를 사용하여 선택자를 그룹화해야 합니다). 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<h2 class="bbb">+++</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  +++
</p>

<div class="bbb">
  +++
</div>

Задание 11

클래스 bbb를 가진 모든 문단 p와 클래스 xxx를 가진 모든 h2를 동시에 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<h2 class="bbb">---</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  ---
</p>

<div class="bbb">
  ---
</div>

Задание 12

id가 block인 요소 내의 클래스 bbb를 가진 모든 문단 p와 id가 block인 요소 내의 클래스 xxx를 가진 모든 문단 p를 동시에 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2 class="bbb">---</h2>
  <p class="bbb">
    +++
  </p>
  
  <h2 class="xxx">---</h2>
  <p>
    ---
  </p>
  
  <h2>---</h2>
  <p class="xxx">
    +++
  </p>
  
  <div class="bbb">
    ---
  </div>
  <div class="xxx">
    ---
  </div>
</div>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>

Задание 13

클래스 fff를 가진 모든 요소를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div class="fff">
  +++
</div>

<h2 class="fff">+++</h2>
<p class="fff">
  +++
</p>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>

Задание 14

클래스 fff를 가진 요소 내의 모든 문단 p를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div class="fff">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  ---
</p>

Задание 15

클래스 fff를 가진 모든 문단 p를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div id="block">
  <h2>---</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="fff">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  +++
</p>

Задание 16

클래스 fff를 가진 요소 내의 클래스 bbb를 가진 모든 요소를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="bbb">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="bbb">
  ---
</p>

Задание 17

클래스 fff를 가진 요소 내의 클래스 bbb를 가진 모든 h2를 선택하는 선택자를 작성하십시오. 다음 코드에서 작성한 선택자를 테스트해 보십시오:

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p class="bbb">
    ---
  </p>
</div>

<h2 class="bbb">---</h2>
<p class="bbb">
  ---
</p>
<p class="fff">
  ---
</p>