Tag div untuk Pengelompokan Tag di HTML

Dalam pelajaran sebelumnya kita membahas tag span, yang memungkinkan untuk menyorot sebagian teks. Ada juga tag khusus div, yang memungkinkan untuk mengelompokkan beberapa tag, untuk kemudian melakukan sesuatu pada mereka secara bersamaan.

Sebagai contoh, dengan menggunakan tag div kita akan mengelompokkan paragraf:

html<div class="block1">
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div class="block2">
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Mari kita berikan warna merah untuk elemen dari grup pertama, dan elemen dari grup kedua - warna hijau:

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

Задание 1

Diberikan kode berikut:

html<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Warnai konten div pertama dengan warna merah, konten div kedua - dengan warna hijau, dan konten div ketiga - dengan warna biru. Berikan setiap div kelasnya masing-masing untuk ini.

Задание 2

Diberikan kode berikut:

html<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>
<div>
  <h2>Judul</h2>
  <p>
    teks
  </p>
  <p>
    teks
  </p>
</div>

Warnai konten div pertama dan ketiga dengan warna merah, konten div kedua dan keempat - dengan warna hijau. Untuk ini, berikan div pertama dan ketiga satu kelas, dan div kedua dan keempat - kelas lainnya.