ID - Trik CSS | CSS Almanak 2025

The #idpemilih memungkinkan Anda untuk menargetkan elemen dengan referensi idatribut HTML. Mirip dengan bagaimana atribut kelas dilambangkan dalam CSS dengan "titik" ( .) sebelum nama kelas, atribut ID diawali dengan "octothorpe" ( #), lebih umum dikenal sebagai "hash" atau "tanda pagar".

#header ( /* this is the ID selector */ background: #eee; )

Nilai atribut ID harus unik. HTML dengan dua atau lebih identik idtidak memvalidasi, dan akan menghasilkan hasil yang tidak dapat diprediksi. Jika ada dua yang sama, CSS akan tetap cocok dan memberi gaya pada keduanya. Namun JavaScript, saat menanyakan ID, akan menemukan yang pertama dan berhenti.

Pemilih ID sangat kuat. Mereka memiliki spesifisitas yang sangat tinggi, umumnya ditulis sebagai (0, 1, 0, 0). Gaya berlaku dengan mereka menimpa penyeleksi lain yang hanya menggunakan tag atau kelas. Untuk menunjukkan:

Lihat Pena ini!

Paragraf dengan ID dan atribut kelas diberikan aturan CSS yang bertentangan; meskipun pemilih kelas ( .reusable) berada di bawah selektor ID ( #unique) di CSS (biasanya akan menimpa gaya di atasnya dalam "kaskade"), paragraf tetap merah karena #uniquemembanjiri warna biru yang disetel .reusable. Jumlah kelas yang tak terbatas tidak akan pernah bisa mengalahkan kekhususan ID (meskipun ada bug pada satu waktu di mana 256 kelas akan mengalahkan ID).

Kekhususan dan keunikan tinggi berarti penggunaan #idadalah "opsi inti" CSS: terlalu bertenaga, tidak fleksibel, dan efektif secara tidak proporsional. Menghindari #idpemilih di CSS dianggap sebagai praktik terbaik: lebih baik menggunakan kelas di hampir setiap kasus.

Karena itu, atribut ID memiliki beberapa kegunaan berharga di luar CSS:

Menyediakan pengait unik untuk JavaScript
Elemen dengan idatribut dapat ditargetkan dengan tag jangkar, dengan mengatur hrefatribut ke idnilai, diawali dengan #simbol. Mengklik tautan jangkar itu akan memfokuskan kembali halaman saat ini pada elemen dengan pencocokan id. Ini disebut "pengidentifikasi fragmen".
Untuk elemen yang benar-benar unik di HTML Anda, seperti elemen formulir, ID dapat berguna untuk hal-hal seperti menautkan labels dan inputs.

Tempat Menarik

Valid #idtidak boleh dimulai dengan angka dan harus terdiri dari setidaknya satu karakter. Sebagian besar Unicode adalah karakter yang valid dalam file id.
id atribut dan pemilih peka huruf besar / kecil, dan harus sama persis di seluruh HTML, CSS, dan JavaScript