ID Selector

Class boleh dipakai berulang sebanyak apa pun, tetapi kadang kita perlu menunjuk satu elemen yang memang unik di halaman: satu form pendaftaran, satu bagian harga, satu peta lokasi. Untuk identitas tunggal seperti itu HTML menyediakan atribut id, dan CSS menyediakan selector berawal tanda pagar. Chapter ini membahas cara kerja #nama, kegunaan id yang sah di luar styling, serta satu peringatan penting: bobot id yang sangat tinggi membuatnya jarang menjadi pilihan tepat untuk styling.

Satu Halaman, Satu Nama #

<h2 id="pesan-sambutan">Pesan Sambutan</h2>

#pesan-sambutan {
  border-left: 4px solid #14503a;
  padding-left: 12px;
}

Demo berikut menaruh id itu pada satu dari dua heading:

Aturan mainnya tegas: setiap nilai id harus unik dalam satu halaman, dan satu elemen hanya boleh memakai satu id. Bila dua elemen memakai id yang sama, dokumen menjadi tidak valid, dan fungsi seperti document.getElementById hanya mengembalikan elemen pertama — sumber kebingungan yang mudah dihindari dengan disiplin penamaan.

Untuk penamaannya, ikuti kebiasaan yang sama dengan class: huruf kecil dan kebab-case, misalnya form-pendaftaran atau panel-harga. Nama yang deskriptif membuat rujukan lintas berkas — anchor, label, JavaScript — mudah dilacak bertahun-tahun kemudian.

Bobot yang Sangat Tinggi #

Dalam perhitungan specificity, satu class dihitung (0,1,0) — sering disebut 10 — sedangkan satu id dihitung (1,0,0), sering disebut 100. Selisih ini bukan sekadar angka: satu aturan id mengalahkan sejumlah class apa pun, tanpa memandang urutan penulisan:

.pesan {
  color: #0f766e;
}

#pesan-sambutan {
  color: #b3261e;
}

Demo berikut menulis aturan id paling awal, lalu dua aturan class berturut-turut; amati siapa yang menang:

Mari kita telaah demonya:

1. Paragraf pertama memakai class pesan sekaligus id pesan-sambutan; paragraf kedua hanya class.
2. Dua aturan .pesan ditulis berturut-turut; aturan terakhir menang di antara sesama class (urutan sumber), sehingga paragraf kedua berwarna hijau pekat.
3. Aturan #pesan-sambutan ditulis paling awal tetapi tetap menang atas kedua aturan class — bobot id mengabaikan urutan penulisan.
4. Bila id dihapus dari paragraf pertama, warnanya langsung mengikuti class seperti paragraf kedua.

Bobot besar ini membantu sekaligus merepotkan: mudah menang, sulit ditimpa. Begitu satu gaya ditetapkan lewat id, class mana pun tidak sanggup menggantinya tanpa tambahan kekuatan — dan di situ kebiasaan kurang sehat biasanya dimulai. Detail rumus specificity kita bedah tuntas pada section Cascade, Inheritance, dan Specificity.

Kapan id Tepat Dipakai #

id tetap penting — bukan sebagai alat styling, melainkan sebagai identitas yang dirujuk bagian lain dokumen:

<nav>
  <a href="#harga">Lihat harga</a>
</nav>

<h2 id="harga">Daftar Harga</h2>

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

Untuk styling, class hampir selalu cukup — termasuk untuk elemen yang unik. Header halaman memang hanya satu, tetapi class .header-halaman memberi fleksibilitas yang sama dengan class lain tanpa menaikkan bobot aturan satu pun.

Kesalahan Umum #

Ringkasan #

ID selector menunjuk satu elemen dengan identitas unik, bobotnya jauh di atas class, dan kegunaan terbaiknya ada di luar styling: anchor, label form, hook JavaScript, dan referensi ARIA. Kebiasaan menyimpan styling di class menjaga berkas CSS tetap mudah ditimpa dan dirawat. Selanjutnya kita melihat attribute selector — cara menyasar elemen berdasarkan atribut apa pun, bukan hanya class dan id.