Perbedaan utama antara id dan class di CSS ada pada dua hal: id bersifat unik dan hanya boleh dipakai sekali dalam satu halaman, sedangkan class boleh dipakai berkali-kali di banyak elemen sekaligus. Di CSS, kamu memilih elemen ber-id dengan tanda pagar (#nama) dan elemen ber-class dengan titik (.nama). Selain soal jumlah pemakaian, keduanya juga punya “bobot” (specificity) yang berbeda, dan bobot inilah yang menentukan aturan mana yang menang ketika dua CSS saling bentrok di elemen yang sama.

Dua kalimat di atas sudah menjawab inti pertanyaannya. Tapi sisanya, kenapa developer modern hampir selalu memilih class untuk styling, apa itu specificity dan kenapa id bisa bikin CSS-mu susah dirawat, sampai kapan id justru berguna, itulah yang sering membuat pemula bingung memilih. Artikel ini membahas semuanya berurutan, lengkap dengan contoh kode yang bisa langsung kamu coba.

id dan class Adalah… (Pengertian Singkat)

id dan class adalah dua atribut HTML yang berfungsi memberi “nama” pada elemen, supaya elemen itu bisa kita sasar (target) dari CSS untuk diberi gaya, atau dari JavaScript untuk dimanipulasi. Tanpa nama ini, CSS hanya bisa menyasar elemen berdasarkan jenis tag-nya (misalnya semua <p>), yang tentu tidak cukup presisi begitu halamanmu punya puluhan elemen sejenis.

Perhatikan cara menuliskannya di HTML:

<!-- id: satu nama unik untuk satu elemen -->
<div id="header-utama">Ini header halaman</div>

<!-- class: nama yang bisa dipakai bersama banyak elemen -->
<div class="kartu">Kartu pertama</div>
<div class="kartu">Kartu kedua</div>
<div class="kartu">Kartu ketiga</div>

Lalu di CSS, kita “memanggil” nama-nama itu dengan simbol yang berbeda:

/* Menyasar id → pakai tanda pagar # */
#header-utama {
  background: #1e293b;
  color: white;
}

/* Menyasar class → pakai tanda titik . */
.kartu {
  border: 1px solid #e2e8f0;
  padding: 16px;
}

Perhatikan aturan simbolnya karena ini yang paling sering tertukar: # untuk id, . untuk class. Cara cepat mengingatnya: id seperti nomor KTP (satu orang satu nomor, unik), sedangkan class seperti seragam sekolah (banyak murid bisa memakai seragam yang sama). Kalau kamu masih baru di dunia atribut HTML, ada baiknya perkuat dulu dasarnya lewat panduan belajar HTML untuk pemula sebelum lanjut.

Perbedaan id dan class: Penjelasan Lengkap

Perbedaan id dan class bisa diringkas jadi tiga poin: (1) id unik dan hanya boleh sekali per halaman sementara class boleh berulang, (2) id disasar dengan # sedangkan class dengan ., dan (3) id punya bobot specificity jauh lebih tinggi (100) dibanding class (10). Ketiga perbedaan ini saling terkait, dan memahaminya sekaligus akan membuatmu tidak pernah bingung lagi memilih di antara keduanya. Mari bedah satu per satu.

1. Unik vs Bisa Dipakai Ulang

Ini perbedaan yang paling fundamental. Sebuah nilai id seharusnya hanya muncul sekali di seluruh halaman, ibarat nomor kursi di bioskop, tidak boleh ada dua kursi dengan nomor yang sama. Sementara class justru dirancang untuk dipakai berulang di banyak elemen.

<!-- BENAR: satu id "menu-utama" untuk satu elemen -->
<nav id="menu-utama">...</nav>

<!-- SALAH: id "produk" dipakai tiga kali -->
<div id="produk">Produk A</div>
<div id="produk">Produk B</div>
<div id="produk">Produk C</div>

<!-- BENAR: pakai class kalau elemennya banyak dan mirip -->
<div class="produk">Produk A</div>
<div class="produk">Produk B</div>
<div class="produk">Produk C</div>

HTML dengan id ganda memang masih “jalan” di browser, CSS-nya akan tetap mewarnai ketiganya. Tapi itu HTML tidak valid, dan bisa bikin JavaScript berperilaku aneh (misalnya document.getElementById("produk") hanya mengembalikan elemen pertama, mengabaikan sisanya). Karena itu, begitu kamu butuh menata banyak elemen serupa, class adalah jawabannya.

2. Bobot Specificity: Siapa yang Menang Saat Bentrok?

Di sinilah letak perbedaan teknis yang paling penting. Specificity adalah sistem poin yang dipakai browser untuk menentukan aturan CSS mana yang menang ketika dua aturan mengatur properti yang sama pada elemen yang sama. Dalam sistem ini, id bernilai 100 poin, sedangkan class hanya 10 poin. Artinya, satu selector id selalu mengalahkan selector class, bahkan mengalahkan sepuluh class sekaligus.

/* Elemen yang sama disasar dua aturan yang bentrok */
#judul {
  color: red;    /* id = 100 poin → MENANG */
}
.judul {
  color: blue;   /* class = 10 poin → kalah */
}

Kalau sebuah elemen punya id="judul" sekaligus class="judul", teksnya akan berwarna merah, karena #judul (100) menang telak atas .judul (10). Urutan penulisan di file CSS tidak berpengaruh di sini; yang menentukan murni bobot poinnya.

3. Simbol Selector yang Berbeda

Sudah disinggung di atas, tapi penting ditegaskan karena sering tertukar saat sedang buru-buru: id disasar dengan #, class disasar dengan .. Salah simbol berarti CSS-mu tidak menemukan elemen apa pun dan diam-diam tidak melakukan apa-apa, tanpa pesan error. Kalau gaya yang kamu tulis “tidak jalan”, cek dulu apakah simbolnya sudah benar.

Berikut ringkasan ketiga perbedaannya dalam satu tabel:

Aspek	`id` (`#`)	`class` (`.`)
Jumlah pemakaian	Unik, sekali per halaman	Bebas, berkali-kali
Simbol di CSS	`#nama`	`.nama`
Bobot specificity	100 (tinggi)	10 (rendah)
Cocok untuk	Anchor/`#link`, target JS, elemen tunggal	Styling, komponen berulang
Satu elemen boleh punya	Hanya satu `id`	Banyak `class` sekaligus

Baris terakhir itu sering terlewat: sebuah elemen boleh punya beberapa class sekaligus (dipisah spasi), tapi hanya boleh punya satu id. Kita bahas ini sebentar lagi.

Coba Sendiri: Lihat Bedanya Secara Langsung

Cara tercepat memahami perbedaan ini adalah melihatnya bekerja. Di playground bawah ini, coba klik tombol untuk beralih antara menyasar dengan .class dan #id. Perhatikan berapa banyak kartu yang ikut terwarnai, dan lihat bagaimana bobot specificity-nya berubah:

Coba Sendiri

.kartu { background: #f97316; }

Tiap kartu ditulis dengan class="kartu" di HTML.

Kartu #1

Kartu #2

Kartu #3

.class bisa dipakai berkali-kali, ketiga kartu ikut terwarnai. Ini kekuatan class: satu aturan, banyak elemen.

Bobot specificity10

id (100) 10x lebih kuat dari class (10). Makin tinggi bobotnya, makin susah ditimpa.

Saat kamu memilih .kartu, ketiga kartu langsung ikut oranye, karena satu class menyasar semua elemen yang memakainya. Begitu kamu ganti ke #promo, hanya satu kartu yang menyala: itulah sifat id yang seharusnya cuma menempel di satu elemen unik. Batang specificity di bawahnya juga melonjak dari 10 ke 100, memperlihatkan betapa jauh lebih “berat” sebuah id dibanding class.

Satu Elemen, Banyak Class

Salah satu keunggulan terbesar class adalah kamu bisa menempelkan beberapa class sekaligus pada satu elemen, dipisahkan dengan spasi. Pola ini memungkinkanmu menyusun gaya seperti menyusun balok Lego: satu class untuk bentuk dasar, satu untuk warna, satu untuk ukuran. Ini mustahil dilakukan dengan id.

<!-- Satu tombol, tiga class digabung -->
<button class="tombol tombol-besar tombol-primer">Beli Sekarang</button>

.tombol {
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.tombol-besar {
  padding: 16px 32px;   /* atur ukuran */
  font-size: 18px;
}
.tombol-primer {
  background: #f97316;  /* atur warna */
  color: white;
}

Dengan pola ini, kamu bisa membuat variasi tombol tanpa menulis ulang: tombol kecil tinggal ganti tombol-besar jadi tombol-kecil, tombol sekunder tinggal ganti tombol-primer jadi tombol-sekunder. Konsep “banyak class kecil yang digabung” inilah fondasi cara kerja framework seperti Tailwind CSS, kalau penasaran bagaimana pendekatan ini diskalakan, panduan Tailwind CSS kami membahasnya lebih jauh.

Kapan Sebaiknya Pakai id?

Meski styling sebaiknya pakai class, id tetap punya tempatnya untuk kasus yang memang menuntut keunikan. Ada tiga situasi klasik di mana id adalah pilihan yang tepat, dan semuanya bukan soal tampilan, melainkan soal identitas.

Pertama, sebagai target link internal (anchor). Ini pemakaian id paling umum. Kamu memberi id pada sebuah bagian halaman, lalu membuat link yang melompat ke sana:

<a href="#kontak">Lompat ke bagian kontak</a>

<!-- ... jauh di bawah halaman ... -->
<section id="kontak">
  <h2>Hubungi Kami</h2>
</section>

Saat link diklik, halaman otomatis menggulir ke elemen ber-id="kontak". Ini fitur bawaan HTML yang bekerja tanpa JavaScript sama sekali. Kalau kamu ingin mendalami cara kerja link dan tag <a>, ada artikel khusus tentang hyperlink yang membahasnya tuntas.

Kedua, sebagai pegangan untuk JavaScript. Fungsi document.getElementById() dirancang khusus mengambil satu elemen unik dengan cepat. Karena id dijamin unik, JavaScript tahu persis elemen mana yang dimaksud:

// JavaScript mengambil elemen unik lewat id-nya
const tombol = document.getElementById("tombol-kirim")
tombol.addEventListener("click", () => {
  console.log("Tombol diklik!")
})

Ketiga, untuk menghubungkan <label> dengan input form. Atribut for pada label harus cocok dengan id input yang dituju:

<label for="email">Email:</label>
<input id="email" type="email" />

Ketika label diklik, fokus otomatis pindah ke input yang id-nya cocok, penting untuk aksesibilitas. Kalau kamu ingin memahami lebih dalam bagaimana CSS memilih elemen secara umum, lesson interaktif tentang CSS selector di Hyper Sheets membahas semua jenis selector langsung di editor browser, dan lesson specificity-nya mengupas sistem poin id-vs-class ini sampai tuntas.

Kesalahan Umum Seputar id dan class

Kesalahan paling sering bukan soal sintaks, melainkan soal salah memilih alat: memakai id untuk styling, menduplikat id, atau tertukar simbol # dan .. Berikut daftar jebakan yang paling sering menjerat pemula.

1. Memakai id untuk styling yang seharusnya class. Terlihat berhasil di awal, sampai kamu butuh menimpa gayanya dan malah terjebak perang specificity. Solusinya: biasakan styling dengan class sejak baris pertama.

2. Menduplikat nilai id dalam satu halaman. CSS-nya jalan, tapi HTML jadi tidak valid dan JavaScript bisa salah menangkap elemen. Kalau ada dua elemen atau lebih yang butuh nama sama, itu tandanya kamu butuh class, bukan id.

3. Tertukar simbol # dan .. Menulis .header-utama padahal maksudnya id, atau sebaliknya, membuat selector tidak menemukan apa-apa. CSS tidak melempar error, ia hanya diam. Selalu cek DevTools kalau gaya tidak muncul.

4. Menulis simbol #/. di dalam atribut HTML. Ingat, di HTML kamu menulis class="kartu", bukan class=".kartu". Simbol hanya dipakai di CSS.

5. Menamai id atau class diawali angka. Nama seperti 1kolom tidak valid. Awali selalu dengan huruf: kolom-1, bukan 1-kolom.

Cek Pemahaman

Sebuah elemen punya `id='judul'` sekaligus `class='judul'`. Di CSS, `#judul` mengatur `color: red` dan `.judul` mengatur `color: blue`. Warna apa yang muncul?

FAQ Seputar id dan class

Apa perbedaan utama id dan class di CSS?

id bersifat unik dan hanya boleh dipakai sekali per halaman, sedangkan class boleh dipakai berkali-kali di banyak elemen. Di CSS, id disasar dengan #nama dan class dengan .nama. Selain itu, id punya bobot specificity 100 sementara class hanya 10, sehingga aturan id selalu menang saat bentrok.

Kapan harus pakai id dan kapan pakai class?

Untuk styling (tampilan), hampir selalu pakai class karena fleksibel dan bisa diulang. Pakai id hanya saat butuh keunikan: target link internal (#kontak), pegangan untuk JavaScript (getElementById), atau menghubungkan <label> dengan input lewat atribut for.

Apakah satu elemen boleh punya id dan class sekaligus?

Boleh. Satu elemen bisa punya id dan class bersamaan, misalnya <div id="menu" class="nav besar">. Bahkan satu elemen boleh punya banyak class sekaligus (dipisah spasi), tapi tetap hanya boleh punya satu id.

Kenapa id tidak disarankan untuk styling?

Karena bobot specificity-nya terlalu tinggi (100). Begitu kamu menata elemen dengan id, gaya itu jadi sangat sulit ditimpa oleh class biasa, kamu terpaksa menulis selector yang makin panjang dan rumit. Memakai class menjaga CSS tetap mudah dirawat dan bebas dari “perang specificity”.

Bagaimana cara menulis id dan class di HTML?

Tanpa simbol apa pun: id="header" dan class="kartu". Simbol # dan . hanya dipakai di CSS (dan JavaScript) untuk menyasar elemen tersebut. Menulis class=".kartu" di HTML adalah kesalahan umum.

Apakah boleh ada dua id yang sama dalam satu halaman?

Tidak boleh. Nilai id harus unik di seluruh halaman. Meski browser tetap merender gayanya, HTML-nya menjadi tidak valid dan JavaScript seperti getElementById hanya akan menangkap elemen pertama. Kalau butuh nama yang sama untuk banyak elemen, gunakan class.

Langkah Selanjutnya

Sekarang kamu sudah pegang gambaran utuhnya: id itu unik dan berbobot tinggi (pakai #), class itu fleksibel dan bisa diulang (pakai .), dan untuk styling sehari-hari class hampir selalu jadi pilihan yang lebih waras. Yang membedakan orang yang “tahu selector” dan yang “jago CSS” tinggal satu: kebiasaan memilih alat yang tepat, class untuk tampilan, id untuk identitas unik, tanpa perlu mikir lagi.

Cara tercepat membentuk kebiasaan itu adalah latihan langsung. Mulai dari lesson CSS selector untuk memantapkan cara menyasar elemen, lalu lanjut ke lesson specificity supaya sistem poin id-vs-class benar-benar melekat. Setelah selector-mu rapi, gerbang berikutnya adalah menata jarak antar elemen, dan di situlah artikel padding serta panduan Flexbox kami menunggumu. Selamat ngoding!