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

Bagi sobat yang belum mengerti perbedaan antara Selector ID dan Class maka tidak ada salahnya untuk membaca artikel ini, karena hal tersebut merupakan salah satu pengetahuan basic atau dasar dalam membangun sebuah website.

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.

Mau tau cara mudah research keyword? pakai Tool Pencari Keyword Blog Ini

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

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.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Demikianlah artikel ini Saya buat, bila ada kesalahan penulisan atau penjelasan yang ada Saya mohon maaf. Semoga sedikit penjelasan ini dapat berguna, Terima Kasih.