Znacznik div do grupowania znaczników w HTML

W poprzedniej lekcji omówiliśmy znacznik span, który pozwala w jakiś sposób wyróżnić fragment tekstu. Istnieje również specjalny znacznik div, który pozwala zgrupować kilka znaczników, aby następnie móc zrobić z nimi coś jednocześnie.

Niech jako przykład za pomocą znaczników div zgrupujemy akapity:

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

Nadajmy elementom z pierwszej grupy czerwony kolor, a elementom z drugiej grupy - zielony:

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

Задание 1

Dany jest następujący kod:

html<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Pokoloruj zawartość pierwszego diva na czerwono, zawartość drugiego diva - na zielono, a zawartość trzeciego diva - na niebiesko. Nadaj w tym celu każdemu divowi własną klasę.

Задание 2

Dany jest następujący kod:

html<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>
<div>
  <h2>Tytuł</h2>
  <p>
    tekst
  </p>
  <p>
    tekst
  </p>
</div>

Pokoloruj zawartość pierwszego i trzeciego diva na czerwono, zawartość drugiego diva i czwartego - na zielono. W tym celu pierwszemu i trzeciemu divowi nadaj jedną klasę, a drugiemu i czwartemu - inną klasę.