Descendant Selector dalam CSS

Descendant Selector

Digunakan untuk menseleksi elemen-elemen yang merupakan turunan dari elemen lainya dalam dokumen tree.

Contoh:

Terdapat satu paragraph seperti berikut ini:

<p><em>Fahmi Basya Kartapura</em> menyediakan kursus PHP dan MySQL private di daerah bogor</p>

Keterangan:

Maka tag <em> ini adalah descendant selector dari tag <p>.

Lalu terdapat property css seperti berikut ini:

p {

color: blue;

}

Hasil:

Fahmi Basya Kartapura menyediakan kursus PHP dan MySQL private di daerah bogor

Muncul Pertanyaan:

Bagaimana caranya agar¬† tulisan Fahmi Basya Kartapura¬† berwarna merah … ?

Jawaban:

Kamu harus mendefinisikannya juga seperti kode berikut ini:

p em {

color:red;

}

Keterangan:

  • p em pada kode ini maka em adalah descendant selector dari tag p
  • Jadi untuk membuat descendant selector maka kamu tuliskan setelah tag parentnya dengan spasi.

Contoh Kedua:

Terdapat kode HTML seperti berikut ini:

<html>
<head>
<style>

li a{ 

color:red;
text-decoration:none;

}

</style>
</head>

<body>
<ul>

<li>

<a href=”satu.htm”>Satu</a>

<ul>

<li>

<a href =”home.htm”>Home</a>

</li>

</ul>
</i>

</ul>
</body>

</html>

Keterangan:

Terlihat bahwa semua link berwarna merah dan tidak bergaris bawah, jadi descendant selector menseleksi semua tag <a> dimana tag <a> ini berada dibawah tag<li>


Jika Tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *