Mazoezi ya Uchambuzi wa Kuchagua CSS

Задание 1

Andika kichaguzi ambacho kitachagua aya, zilizo ndani ya divi div. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

Задание 2

Andika kichaguzi ambacho kitachagua h2 zote, zilizo ndani ya divi div. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

Задание 3

Andika kichaguzi ambacho kitachagua aya zote p kutoka kwa kipengele chenye id, sawa na block. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

Задание 4

Andika kichaguzi ambacho kitachagua h2 zote kutoka kwa kipengele chenye id, sawa na block. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua vipengele vyote vilivyo na darasa bbb. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua vipengele vyote vilivyo na darasa bbb kutoka kwa kipengele chenye id, sawa na block. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua aya zote p zilizo na darasa bbb. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua h2 zote zilizo na darasa bbb. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua aya zote p zilizo na darasa bbb kutoka kwa kipengele chenye id, sawa na block. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua vipengele vyote vilivyo na darasa bbb na vipengele vilivyo na darasa xxx wakati mmoja (yaani, unahitaji kuwakusanya pamoja wachaguzi kwa kutumia koma). Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua aya zote p zilizo na darasa bbb na wakati mmoja h2 zote zilizo na darasa xxx. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua aya zote p zilizo na darasa bbb kutoka kwa kipengele chenye id, sawa na block na wakati mmoja aya zote p zilizo na darasa xxx kutoka kwa kipengele chenye id, sawa na block. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua vipengele vyote vilivyo na darasa fff. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

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

Задание 14

Andika kichaguzi ambacho kitachagua aya zote p kutoka kwa kipengele chenye darasa fff. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

Задание 15

Andika kichaguzi ambacho kitachagua aya zote p zilizo na darasa fff. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

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

Задание 16

Andika kichaguzi ambacho kitachagua vipengele vyote vilivyo na darasa bbb kutoka kwa kipengele chenye darasa fff. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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

Andika kichaguzi ambacho kitachagua h2 zote zilizo na darasa bbb kutoka kwa kipengele chenye darasa fff. Jaribu kichaguzi chako kwenye mfumo ufuatao:

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>