CSSda avlod selektorlari va klasslar

Quyidagi kodimiz bor deb faraz qilaylik:

html<div class="block">
  <h2>Sarlavha</h2>
  <p>
    matn
  </p>
</div>
<div class="block">
  <h2>Sarlavha</h2>
  <p>
    matn
  </p>
</div>

Keling, h2 barcha sarlavhalarni va block klassli element ichida joylashgan abzatslarni tanlab, ularni turli ranglarga bo'yaylik. Buning uchun avlod selektorlaridan foydalanamiz (bu selektorlar orasidagi bo'shliqdir):

css.block h2 {
  color: red;
}
.block p {
  color: green;
}

html<p class="eee">
  matn <i>kursiv</i>
</p>
<p class="eee">
  matn <i>kursiv</i>
</p>
<div class="eee">
  matn <i>kursiv</i>
</div>
<div class="eee">
  matn <i>kursiv</i>
</div>