Perbedaan dan Penggunaan Selector ID dan Class

Perbedaan dan Penggunaan Selector ID dan Class - Untuk mengintegrasikan HTML dan Css yakni memberikan aturan styling pada HTML di blog kita, maka kita perlu menggunakan selector ID dan Css.

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.
Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja

1. Tidak boleh ada ID lebih dari satu
2. Tidak boleh diawali oleh angka
3. 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.
Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja

1. Class bisa digunakan dilebih dari satu elemen
2. Bisa menggunakan lebih dari satu nama Class pada satu elemen
3. Tidak boleh diawali oleh angka
4. 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.

Memberikan style pada tag HTML tertentu memang bisa dilakukan tanpa selector ID maupun Class, hanya saja akan terlihat tidak rapi dan terbatas.

Share this

Author : Heartless

Frontman - Assassine

Related Posts