A div tag a HTML tagok csoportosításához

Az előző leckében megvizsgáltuk a span taget, amely lehetővé teszi a szöveg egy részének kiemelését. Létezik egy speciális div tag is, amely lehetővé teszi több tag csoportosítását, hogy aztán egyszerre valamit tehessünk velük.

Példaként a div tag segítségével csoportosítsuk a bekezdéseket:

html<div class="block1">
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div class="block2">
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>

Adjunk az első csoport elemeinek piros színt, a második csoport elemeinek pedig zöldet:

css.block1 {
  color: red;
}
.block2 {
  color: green;
}

Задание 1

Adott a következő kód:

html<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>

Színezze az első div tartalmát pirosra, a második div tartalmát zöldre, a harmadik div tartalmát pedig kékre. Ehhez adjon minden div-nek saját osztályt.

Задание 2

Adott a következő kód:

html<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>
<div>
  <h2>Cím</h2>
  <p>
    szöveg
  </p>
  <p>
    szöveg
  </p>
</div>

Színezze az első és a harmadik div tartalmát pirosra, a második és a negyedik div tartalmát zöldre. Ehhez az első és a harmadik div-nek adjon egy osztályt, a második és a negyedik div-nek pedig egy másik osztályt.