Saat membahas tag <div>, ada beberapa istilah yang sering digunakan terkait posisi dari tag <div>. Sebelum melanjutkan pembahasan tentang CSS, ada baiknya kita memahami istilah-istilah tersebut. Berikut ini adalah istilah-istilah yang saya maksud :
- Parent / ortu = elemen HTML yang berisi elemen-elemen HTML lain.
- Child / anak = elemen HTML yang berada "tepat" di dalam elemen lain dan bukan descendant.
- Descendant / keturunan = child dan child dari child.
- Sibling = elemen-elemen HTML yang berada pada lingkup yang sama atau diapit tag yang sama dengan elemen lainnya.
Kombinator CSS
Hubungan antar elemen HTML bisa dimanfaatkan dalam kode CSS dengan menggunakan combinator. Supaya lebih mudah bacaannya, kita bahasa Indonesiakan saja jadi kombinator. Kombinator-kombinator yang bisa digunakan dalam CSS bisa kalian lihat di bawah ini.
- spasi (descendant)
- > (child)
- + (adjacent sibling, sibling (yang terletak tepat di bawah) setelah elemen HTML yang ditunjuk selector)
- ~ (sibling)
Btw, kalau mau memilih semua child tanpa peduli nama id, class atau tag-nya; gunakan tanda asterisk(*).
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#ortu{
background : green;
color : red;
}
#ortu *{
background : yellow;
color : blue;
}
#ortu + p{
font-weight:bold;
color:pink;
}
#ortu ~ p{
background : purple;
}
</style>
</HEAD>
<BODY>
<H2>Belajar HTML</H2>
<p>
Ini adalah paragraf 1.
</p>
<div id = "ortu">
<p>
Ini adalah paragraf 2.
</p>
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4
</p>
</div>
<p>
Ini adalah paragraf 3.
</p>
<p>
Ini adalah paragraf 4
</p>
</BODY>
</HTML>Contoh kode HTML di atas menunjukkan cara menggunakan *. Pada contoh di atas, ada juga kombinator untuk menunjuk sibling. kombinator tersebut menggunakan tanda "~" dan "+". Kalau belum tahu bedanya, silakan otak-atik sendiri CSS dan kode HTML-nya untuk dianalisa sendiri.