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

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

Perbedaan dan Cara Menggunakan Selector ID dan Class Pada HTML 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.

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. 

18 komentar

Terimakasih telah berkunjung dan membaca artikel di Blog ini. Tinggalkan kritik, saran, dan pertanyaan pada kolom komentar.

jadi beda pas di cssnya titik"." ama pagar"#" NYA Doang ya??

Balas

dri bebrapa website yg sya lihat mengenai prbedaan id sm class, website ini yg lbih mudah untk dimngerti .

Balas

info keren gan, lg butuh juga

Balas

mudah dimengerti
trima kasih..

Balas

Salam Hormat,,, Bapak,,, saya ada problem dikit Pak,, kenapa untuk nomor urut seperti nomor id gitu kena limit diangka 10/100/1000/9999/ mohon dibantu Bapak... Terimakasih...

Balas

Makasih sobat sangat membantu (y)

Balas

maksud dari kena limit di sini bagaimana ya pak? bisa dijelaskan lebih rinci?

Balas

Mantap sob sangat membantu sekaligus bingungpun ilang hehe

Balas

Mantep gan. Makasih infonya..

Balas

Oh jadi gitu to perbdaannya oke sob trims

Balas

ngoding nya yg bikin pusing >_< wkwkwkk

Balas

Thanks sob, lumayan penjelasan ente sangat mudah dimengerti.
InsyaAllah akan kutulis ulang di blogku biar semakin banyak orang jago koding CSS seperti ente.

Balas

Mantap mas gan ini yang aku cari dari kemarin-kemarin makasih lo mas hehe

Balas

terimaksih gan sangat barmanfaat infonya

Balas