Saat kamu kenalan ma CSS, kamu masih inget gak ada salah satu bagian dari kode CSS yaitu selector. Nah, kali ini saya akan bahas sebenernya ada tiga jenis selector di CSS. Apa aja? Yups.. baca terus artikel ini..

Tiga jenis selector di CSS :

1. HTML selector, menunjukkan bahwa yang dikasih style itu salah satu tag HTML. Contohnya yang h4{color :#FFFFFF;} jadi yang punya tag <h4> akan di beri warna putih.

2. id selector, kalo kamu pake id selector, yang kamu style itu hanya tag HTML yang memiliki atribut id.

Contoh kamu punya tag HTML kayak gini :

<h4 id=”heading”>aaa</h4>

kamu bisa kasih style dengan kode CSS :

#heading {color:#FFFFFF}

/*ingat ada karakter ‘#’
sebelum kata heading yang
menunjukkan dia id selector */

3. class selector, hampir sama dengan id selector cuman yang di kasih style itu tag HTML yang memiliki atribut class. Contoh:

<h4 class=”heading”>aaa</h4>

Bisa kamu kasih style:

.heading {color:#FFFFFF;}

/*ingat ada karakter ‘.’
sebelum kata heading yang
menunjukkan dia class selector */

Trus beda pake id dengan class apaan??

Nah, bedanya gini… Umm.. kalo id, kamu cuman bisa make id dengan value tertentu pada satu element HTML aja, contoh, kamu gak bisa make id kayak gini :

<h4 id=”heading”>heading1</h4>
<h4 id=”heading”>heading2</h4>

Cukup satu elemen aja, tapi kalo pake class dua-duanya bisa make class dengan value yang sama, contoh kamu bisa kayak gini :

<h4 class=”heading”>heading1</h4>
<h4 class=”heading”>heading2</h4>

O iya,, ada satu trik mengenai selector, misal kamu pengen nulis CSS kayak gini :

h4{color:#FFFFFF;}
#heading{color:#FFFFFF;}
.warna{color:#FFFFFF;}
.text{color:#FFFFFF;}
#content{color:#FFFFFF;}

Nah karena statementnya sama semua kamu bisa gabungin semuanya jadi satu biar lebih efisien lagi, jadinya gini:

h4, #heading, .warna, .text, #content {color:#FFFFFF;}

jangan lupa dipisahin pake koma ya…