Selektor Keturunan dalam CSS

Misalkan kita memiliki daftar ul dan daftar ol:

html<ul>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ul>
<ol>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
  <li>teks</li>
</ol>

Mari kita warnai tag li dalam daftar-daftar ini dengan warna merah:

cssli {
  color: red;
}

Sekarang misalkan kita ingin mewarnai tag li dari daftar ul dengan warna merah, dan tag li dari daftar ol - dengan warna hijau.

Dalam hal ini, selektor keturunan akan membantu kita. Selektor ini memungkinkan untuk memilih tag berdasarkan induknya. Untuk melakukannya, Anda perlu menentukan selektor induk, dan dipisahkan dengan spasi - selektor keturunannya. Dalam kasus kami, selektor ul li akan memilih semua tag li dari daftar ul, dan selektor ol li - akan memilih semua tag li dari daftar ol. Mari warnai mereka dengan warna yang sesuai:

cssul li {
  color: red;
}
ol li {
  color: green;
}

Selektor keturunan tidak harus terdiri dari dua selektor tag - bisa ada berapa pun jumlahnya, ditulis dengan spasi. Dalam kode berikut, misalnya, semua tag i yang berada di dalam tag li dipilih, yang pada gilirannya berada di dalam tag ul:

cssul li i {
  color: red;
}

html<ul>
  <li>teks <i>miring</i></li>
  <li>teks <i>miring</i></li>
  <li>teks <i>miring</i></li>
  <li>teks <i>miring</i></li>
</ul>

<p>
  teks paragraf <i>miring</i>
</p>
<p>
  teks paragraf <i>miring</i>
</p>

html<p>
  teks paragraf <b><i>tebal miring</i></b>
</p>
<p>
  teks paragraf <i>miring</i>
</p>