CSSセレクタの組み合わせに関する実践

Задание 1

div要素 div 内にある段落を選択するセレクタを記述してください。以下のコードでセレクタをテストしてください：

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

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

Задание 2

div要素 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>