CSS селекторлорун айкалыштыруу боюнча практика

Задание 1

div дивдеринде жайгашкан абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

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

Задание 2

div дивдеринде жайгашкан бардык h2 элементтерин тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

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

Задание 3

id атрибуту block барабар болгон элементтен бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

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

Задание 4

id атрибуту block барабар болгон элементтен бардык h2 элементтерин тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

id атрибуту block барабар болгон элементтен 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>

Задание 7

bbb классы бар бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

bbb классы бар бардык h2 элементтерин тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

id атрибуту block барабар болгон элементтен bbb классы бар бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

bbb классы бар бардык p абзацтарды жана бир эле учурда xxx классы бар бардык h2 элементтерин тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

id атрибуту block барабар болгон элементтен bbb классы бар бардык p абзацтарды жана бир эле учурда id атрибуту block барабар болгон элементтен xxx классы бар бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

fff классы бар элементтен бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

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

Задание 15

fff классы бар бардык p абзацтарды тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

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

Задание 16

fff классы бар элементтен bbb классы бар бардык элементтерди тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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

fff классы бар элементтен bbb классы бар бардык h2 элементтерин тандай турган селекторду жазыңыз. Төмөнкү коддо өз селекторуңузду текшериңиз:

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>