CSS-valitsinten yhdistelmien harjoittelu

Задание 1

Kirjoita valitsin, joka valitsee kappaleet, jotka sijaitsevat div-elementtien sisällä. Tarkista valitsimesi seuraavalla koodilla:

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

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

Задание 2

Kirjoita valitsin, joka valitsee kaikki h2-otsikot, jotka sijaitsevat div-elementtien sisällä. Tarkista valitsimesi seuraavalla koodilla:

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

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

Задание 3

Kirjoita valitsin, joka valitsee kaikki p-kappaleet elementistä, jonka id on block. Tarkista valitsimesi seuraavalla koodilla:

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

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

Задание 4

Kirjoita valitsin, joka valitsee kaikki h2-otsikot elementistä, jonka id on block. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki elementit, joiden luokka on bbb. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki elementit, joiden luokka on bbb elementistä, jonka id on block. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki p-kappaleet, joiden luokka on bbb. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki h2-otsikot, joiden luokka on bbb. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki p-kappaleet, joiden luokka on bbb elementistä, jonka id on block. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki elementit, joiden luokka on bbb ja elementit, joiden luokka on xxx samanaikaisesti (eli valitsimet on ryhmitettävä pilkulla). Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki p-kappaleet, joiden luokka on bbb ja samanaikaisesti kaikki h2-otsikot, joiden luokka on xxx. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki p-kappaleet, joiden luokka on bbb elementistä, jonka id on block ja samanaikaisesti kaikki p-kappaleet, joiden luokka on xxx elementistä, jonka id on block. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki elementit, joiden luokka on fff. Tarkista valitsimesi seuraavalla koodilla:

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

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

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

Задание 14

Kirjoita valitsin, joka valitsee kaikki p-kappaleet elementistä, jonka luokka on fff. Tarkista valitsimesi seuraavalla koodilla:

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

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

Задание 15

Kirjoita valitsin, joka valitsee kaikki p-kappaleet, joiden luokka on fff. Tarkista valitsimesi seuraavalla koodilla:

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

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

Задание 16

Kirjoita valitsin, joka valitsee kaikki elementit, joiden luokka on bbb elementistä, jonka luokka on fff. Tarkista valitsimesi seuraavalla koodilla:

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

Kirjoita valitsin, joka valitsee kaikki h2-otsikot, joiden luokka on bbb elementistä, jonka luokka on fff. Tarkista valitsimesi seuraavalla koodilla:

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>