Практыка на камбінацыі CSS селектараў

Задание 1

Напішыце селектар, які выберэ абзацы, размешчаныя ўнутры дiваў div. Праверце ваш селектар на наступным кодзе:

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

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

Задание 2

Напішыце селектар, які выберэ ўсе h2, размешчаныя ўнутры дiваў div. Праверце ваш селектар на наступным кодзе:

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

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

Задание 3

Напішыце селектар, які выберэ ўсе абзацы p з элемента з id, роўным block. Праверце ваш селектар на наступным кодзе:

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

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

Задание 4

Напішыце селектар, які выберэ ўсе h2 з элемента з id, роўным block. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе элементы з класам bbb з элемента з id, роўным block. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе абзацы p з класам bbb. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе h2 з класам bbb. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе абзацы p з класам bbb з элемента з id, роўным block. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе абзацы p з класам bbb і адначасова ўсе h2 з класам 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>

Задание 12

Напішыце селектар, які выберэ ўсе абзацы p з класам bbb з элемента з id, роўным block і адначасова ўсе абзацы p з класам xxx з з элемента з id, роўным block. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе абзацы p з элемента з класам fff. Праверце ваш селектар на наступным кодзе:

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

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

Задание 15

Напішыце селектар, які выберэ ўсе абзацы p з класам fff. Праверце ваш селектар на наступным кодзе:

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

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

Задание 16

Напішыце селектар, які выберэ ўсе элементы з класам bbb з элемента з класам fff. Праверце ваш селектар на наступным кодзе:

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

Напішыце селектар, які выберэ ўсе h2 з класам bbb з элемента з класам fff. Праверце ваш селектар на наступным кодзе:

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>