CSS'de Alt Öğe Seçicileri ve Sınıflar

Aşağıdaki koda sahip olduğumuzu varsayalım:

html<div class="block">
  <h2>Başlık</h2>
  <p>
    metin
  </p>
</div>
<div class="block">
  <h2>Başlık</h2>
  <p>
    metin
  </p>
</div>

Şimdi, block sınıfına sahip öğenin içindeki tüm h2 başlıklarını ve paragrafları seçelim ve onları farklı renklere boyayalım. Bunun için alt öğe seçicisini (seçiciler arasında boşluk olan) kullanacağız:

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

html<p class="eee">
  metin <i>italik</i>
</p>
<p class="eee">
  metin <i>italik</i>
</p>
<div class="eee">
  metin <i>italik</i>
</div>
<div class="eee">
  metin <i>italik</i>
</div>