Perbedaan Selektor Id dan Class dalam HTML

Selektor tag pada html dibedakan menjadi dua, yaitu selektor id dan selektor class, meskipun keduanya memiliki tujuan yang sama, ada perbedaan dalam hasil seleksinya.

Selektor id menggunakan tag id di dalam html elemen, kode css untuk selektor ini berupa tanda pagar (#), dengan selektor id, kita bisa mengatur tampilan suatu elemen secara khusus (satu id unik untuk satu elemen), bahkan jika ada 2 elemen yang memiliki id sama, hanya elemen pertama yang akan ditunjuk. Sedangkan selektor class menggunakan tag class dan kode css untuk selektor ini berupa tanda titik (.), dengan selektor class, kita bisa mengatur tampilan satu atau beberapa elemen html yang memiliki tag ini (satu class dapat digunakan pada beberapa elemen).

Contoh :
kode CSS :

#tagid {color:blue}
.tagclass {color:red}

kode HTML :

<span id="tagid">kalimat ini menggunakan tag id "tagid", tag id berjalan dengan baik</span>
<br></br>
<span id="tagid">kalimat ini juga menggunakan tag id "tagid", namun karena "tagid" sudah digunakan sebelumnya, tag id ini tak berlaku</span><br></br>
<span class="tagclass">kalimat berikut menggunakan tag class "tagclass"</span><br></br>
kalimat berikut <span class="tagclass">juga menggunakan tag class "tagclass", dan tetap bewarna merah</span>

hasilnya :

kalimat ini menggunakan tag id "tagid", tag id berjalan dengan baik
dan
kalimat ini juga menggunakan tag id "tagid", namun karena "tagid" sudah digunakan sebelumnya, tag id ini tak berlaku sepertinya hasilnya sama saja, ini menandakan jika dalam CSS tidak dibedakan antara id dan class.

kalimat berikut menggunakan tag class "tagclass"
dan
kalimat berikut juga menggunakan tag class "tagclass", dan tetap bewarna merah.

Dari sini jelas perbedaan antara selektor menggunakan id dan class tidak terlihat untuk CSS, namun untuk javascript sangat jelas karena dalam javascript terdapat fungsi selektor khusus untuk id, yaitu getElementById.

Implementasi termudah adalah menggunakan Javascript Jquery, dan tetap menggunakan kode html yang sama diatas, namun kali ini faro mengubah properties font menggunakan Jquery tanpa CSS.
kode Jquery :

$(".tagclass").css("color","red")
$("#tagid").css("color","blue")

Hasilnya :
Dari sini terlihat jelas perbedaan antara selektor id dan selektor class.

Lantas mana yang lebih baik antara selektor id atau selektor class ? menurut faro sendiri, jawabannya adalah situasional, untuk keperluan desain template maka lebih baik menggunakan selektor class, sedangkan untuk keperluan javascript, faro biasa mengkhususkan ke selektor id.

Id mempunyai fungsi khusus lho, coba klik link berikut untuk menuju komentar editor.
Semoga Bermanfaat.

Post link : http://www.blognafaro.com/2014/05/perbedaan-selektor-id-dan-class.html

Perbedaan Selektor Id dan Class dalam HTML

Ringkasan : Selektor tag pada html dibedakan menjadi dua, yaitu selektor id dan selektor class, meskipun keduanya memiliki tujuan yang sama, ada perbedaan dalam hasil seleksinya. .
Jumlah Kata : | Dipublikasikan pada Tuesday, May 6, 2014