Prakses uzdevumi par CSS selektoru kombinācijām

Задание 1

Uzrakstiet selektoru, kas izvēlēsies rindkopas, atrodas iekšā divos div. Pārbaudiet savu selektoru uz šāda koda:

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

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

Задание 2

Uzrakstiet selektoru, kas izvēlēsies visus h2, atrodas iekšā divos div. Pārbaudiet savu selektoru uz šāda koda:

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

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

Задание 3

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p no elementa ar id, vienāds ar block. Pārbaudiet savu selektoru uz šāda koda:

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

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

Задание 4

Uzrakstiet selektoru, kas izvēlēsies visus h2 no elementa ar id, vienāds ar block. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus elementus ar klasi bbb. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus elementus ar klasi bbb no elementa ar id, vienāds ar block. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p ar klasi bbb. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus h2 ar klasi bbb. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p ar klasi bbb no elementa ar id, vienāds ar block. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus elementus ar klasi bbb un elementus ar klasi xxx vienlaicīgi (tas ir, nepieciešams sagrupēt selektorus ar komatu). Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p ar klasi bbb un vienlaicīgi visus h2 ar klasi xxx. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p ar klasi bbb no elementa ar id, vienāds ar block un vienlaicīgi visas rindkopas p ar klasi xxx no elementa ar id, vienāds ar block. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus elementus ar klasi fff. Pārbaudiet savu selektoru uz šāda koda:

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

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

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

Задание 14

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p no elementa ar klasi fff. Pārbaudiet savu selektoru uz šāda koda:

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

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

Задание 15

Uzrakstiet selektoru, kas izvēlēsies visas rindkopas p ar klasi fff. Pārbaudiet savu selektoru uz šāda koda:

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

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

Задание 16

Uzrakstiet selektoru, kas izvēlēsies visus elementus ar klasi bbb no elementa ar klasi fff. Pārbaudiet savu selektoru uz šāda koda:

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

Uzrakstiet selektoru, kas izvēlēsies visus h2 ar klasi bbb no elementa ar klasi fff. Pārbaudiet savu selektoru uz šāda koda:

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>