Perbedaan dan Cara Penggunaan Selector ID dan Class Pada HTML dan CSS

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

ID

Selector ID merupakan 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.

Syarat menggunakan selector ID adalah:

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 (~ ! @ # $ %)

Contoh Penulisan pada HTML :

<div id="header">

Pada contoh diatas menggunakan id "header".

Contoh Penulisan style atau CSS :

#header{propertycss: valuecss;}

Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

CLASS

Selector Class merupakan 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

Contoh Penulisan pada HTML :

<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".

Contoh Penulisan pada CSS :

.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.

Sumber : http://www.creativehubwebdesign.com