html_cssHallo teman-teman, apa kabarnya ? semoga baik-baik saja yah, amin.

Pada kesempatan kali ini saya akan menjelaskan perbedaan dan cara menggunakan selector ID dan Class pada HTML dan CSS, teman-teman pasti sudah tidak asing lagi dengan kedua selector ini, namun apakah teman-teman tau perbedaan diantara kedua nya ? nah bagi teman-teman yang belum tau tidak ada salah nya untuk menyimak sebentar penjelasan yang akan saya uraikan berikut ini, silahkan simak penjelasan dibawah ini.

ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property “Name” yang khusus mengatur nama dari elemen tersebut.

ID

Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID.
  1. Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
  2. Tidak boleh ada ID lebih dari satu
  3. Tidak boleh diawali oleh angka
  4. Tidak boleh mengandung special characters (~ ! @ # $ %)
  5. Penulisan pada HTML contohnya seperti : 

    <div id=”header”>
    Pada contoh diatas menggunakan id “header”.

    Penulisan style atau CSS contohnya seperti :

    #header{propertycss: valuecss;}
    Yaitu diawali dengan karakter “#” pagar kemudian diikuti ID nya.

CLASS

Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.
  1. Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
  2. Class bisa digunakan dilebih dari satu elemen
  3. Bisa menggunakan lebih dari satu nama Class pada satu elemen
  4. Tidak boleh diawali oleh angka
  5. Tidak boleh mengandung special characters

Penulisan pada HTML contohnya seperti :

<div class=”sidebar sidebar1″>Sidebar ke-1</div>
<div class=”sidebar sidebar2″>Sidebar ke-2</div>
Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen, pada contoh class=”sidebar sidebar1″.

Penulisan pada CSS contohnya seperti :

.sidebar{float: left; background: white;}
.sidebar1{width: 100px}
.sidebar2{width: 200px}
Pada contoh kode CSS diatas, elemen dengan selector Class “sidebar” menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector “sidebar1” dan “sidebar2” karena kedua nya termasuk dalam grup class “sidebar“. Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class “sidebar1” saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class “sidebar2“.
Penulisan Class pada CSS diawali oleh “.” titik diikuti oleh selector Class nya.
Nah itulah penjelasan mengenai perbedaan dan cara menggunakan selector ID dan Class pada HTML dan CSS, baiklah teman-teman cukup sekian artikel kali ini, semoga artikel ini bisa bermanfaat, sampai ketemu di artikel selanjutnya 🙂