Perbedaan Atribut ID dan Class dalam HTML

Mungkin dari kita ada yang masih bingung terkait penggunaan kedua atribut tersebut. Disini saya akan memberikan sebuah gambaran dimana kita harus menggunakan atribut id maupun class berdasarkan selector css yang ada :

Coba agan perhatikan CSS berikut berikut :
Selector css pertama

.post-header {
  font-size: 200%;
  font-weight: 300;
  margin: 5px 0;
  padding-bottom: 12px}

Selector css kedua

#post-header {
  font-size: 200%;
  font-weight: 300;
  margin: 5px 0;
  padding-bottom: 12px}

Coba perhatikan dari kedua selektor CSS tersebut apa perbedaannya ?

Ya tanda pada post-headernya, yang pertama berawalan dengan tanda . (titik) dan yang kedua berawalan dengan tanda # (pagar). Lalu apa hubungannya dengan keduanya ?

Oke sekarang kita langsung praktek aja ya :). Silakan agan kunjungi link berikut :

Kemudian pastekan kode berikut pada kolom sebelah kiri :

<style>
 #post-header {
  font-size: 200%;
  font-weight: 300;
  margin: 5px 0;
  padding-bottom: 12px}
  color:red;
</style>
<div class='post-header'>Percobaan</div>

Pasti akan muncul kata percobaan pada kolom sebelah kanan. Namun pertanyaannya adalah apakah struktur HTML tersebut sudah mengikuti style atau css yang kita berikan ? Jawabannya adalah "belum".

Coba agan ganti tanda # dengan tanda . (titik) pada stylenya. Lihat apakah yang terjadi, pasti huruf akan berubah menjadi besar dan berwarna merah. Hal ini dikarenakan atribut class sudah dipengaruhi oleh selector cssnya. Jadi kesimpulannya atribut class akan terbentuk oleh selektor css yang berawalan dengan tanda . (titik) bisa kita sebut juga dengan selector class.

Lalu apa yang selector CSS yang membentuk atribut ID ? Coba sekarang kita praktek lagi.

Copy dan pastekan code yang diatas tadi namun ganti atribut class menjadi id. Pasti tampilan huruf akan langsung terlihat besar. Dari sini dapat kita tarik kesimpulan bahwa atribut id dipengaruhi oleh selektor css yang berawalan dengan tanda # (pagar) atau yang sering kita kenal dengan sebutan selector id.

Untuk selector class, banyaknya penggunaan atau pemanggilan selektor tersebut dapat berulang-ulang lebih dari satu kali. Sedangkan untuk id selector hanya dapat digunakan hanya satu kali karena sifatnya yang unik.

Cukup sampai disini tulisan kali ini, mohon maaf apabila ada kekurangan atau kesalahan. Jika ada koreksi atau tambahan bisa disampaikan langsung melalui kotak komentar di bawah. Semoga dapat dipahami. Sekian dan terimakasih semoga yang sedikit ini bisa bermanfaat untuk kita semua.