Prax na kombinácie CSS selektorov

Задание 1

Napíšte selektor, ktorý vyberie odseky umiestnené inside divoch div. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

Задание 2

Napíšte selektor, ktorý vyberie všetky h2, umiestnené inside divoch div. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

Задание 3

Napíšte selektor, ktorý vyberie všetky odseky p z elementu s id, rovnym block. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

Задание 4

Napíšte selektor, ktorý vyberie všetky h2 z elementu s id, rovnym block. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky elementy s triedou bbb. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky elementy s triedou bbb z elementu s id, rovnym block. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky odseky p s triedou bbb. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky h2 s triedou bbb. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky odseky p s triedou bbb z elementu s id, rovnym block. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky elementy s triedou bbb a elementy s triedou xxx súčasne (to znamená, že je potrebné zoskupiť selektory cez čiarku). Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky odseky p s triedou bbb a súčasne všetky h2 s triedou xxx. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky odseky p s triedou bbb z elementu s id, rovnym block a súčasne všetky odseky p s triedou xxx z elementu s id, rovnym block. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky elementy s triedou fff. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

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

Задание 14

Napíšte selektor, ktorý vyberie všetky odseky p z elementu s triedou fff. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

Задание 15

Napíšte selektor, ktorý vyberie všetky odseky p s triedou fff. Skontrolujte váš selektor na nasledujúcom kóde:

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

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

Задание 16

Napíšte selektor, ktorý vyberie všetky elementy s triedou bbb z elementu s triedou fff. Skontrolujte váš selektor na nasledujúcom kóde:

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

Napíšte selektor, ktorý vyberie všetky h2 s triedou bbb z elementu s triedou fff. Skontrolujte váš selektor na nasledujúcom kóde:

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>