Praktika su CSS selektorių kombinacijomis

Задание 1

Parašykite selektorių, kuris pasirinks pastraipas, esančias div elementuose div. Patikrinkite savo selektorių šiame kode:

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

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

Задание 2

Parašykite selektorių, kuris pasirinks visus h2, esančius div elementuose div. Patikrinkite savo selektorių šiame kode:

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

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

Задание 3

Parašykite selektorių, kuris pasirinks visas pastraipas p iš elemento, kurio id yra block. Patikrinkite savo selektorių šiame kode:

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

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

Задание 4

Parašykite selektorių, kuris pasirinks visus h2 iš elemento, kurio id yra block. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus elementus su klase bbb. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus elementus su klase bbb iš elemento, kurio id yra block. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visas pastraipas p su klase bbb. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus h2 su klase bbb. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visas pastraipas p su klase bbb iš elemento kurio id yra block. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus elementus su klase bbb ir elementus su klase xxx vienu metu (tai yra, reikia sugrupuoti selektorius per kablelį). Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visas pastraipas p su klase bbb ir vienu metu visus h2 su klase xxx. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visas pastraipas p su klase bbb iš elemento kurio id yra block ir vienu metu visas pastraipas p su klase xxx iš elemento, kurio id yra block. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus elementus su klase fff. Patikrinkite savo selektorių šiame kode:

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

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

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

Задание 14

Parašykite selektorių, kuris pasirinks visas pastraipas p iš elemento su klase fff. Patikrinkite savo selektorių šiame kode:

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

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

Задание 15

Parašykite selektorių, kuris pasirinks visas pastraipas p su klase fff. Patikrinkite savo selektorių šiame kode:

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

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

Задание 16

Parašykite selektorių, kuris pasirinks visus elementus su klase bbb iš elemento su klase fff. Patikrinkite savo selektorių šiame kode:

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

Parašykite selektorių, kuris pasirinks visus h2 su klase bbb iš elemento su klase fff. Patikrinkite savo selektorių šiame kode:

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>