Pemilihan Pencabut id

Pemilih id

Pemilih id dapat menentukan gaya khusus bagi elemen HTML dengan id tertentu.

Pemilih id didefinisikan dengan "#".

Dua pemilih id di bawah ini, pertama dapat menentukan warna elemen menjadi merah, yang kedua menentukan warna elemen menjadi hijau:

#red {color:red;}
#green {color:green;}

Dalam kode HTML di bawah, elemen p dengan atribut id red ditampilkan dengan warna merah, sementara elemen p dengan atribut id green ditampilkan dengan warna hijau.

<p id="red">Paragraf ini berwarna merah。</p>
<p id="green">Paragraf ini berwarna hijau。</p>

Perhatian:Atribut id hanya dapat muncul sekali dalam setiap dokumen HTML. Mengapa hal ini, silakan lihat XHTML: perekonstruksi situs.

Pemilih id dan pemilih turun

Dalam rancangan modern, pemilih id sering digunakan untuk membangun pemilih turun.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Gaya di atas hanya akan diterapkan pada paragraf yang muncul di dalam elemen id adalah sidebar. Elemen ini mungkin adalah div atau sel tabel, meskipun itu mungkin juga adalah tabel lainnya atau elemen blok lainnya. Bahkan itu dapat menjadi elemen inlin, seperti <em></em> atau <span></span>, namun penggunaan seperti itu adalah ilegal, karena tidak dapat memasukkan <p> di dalam elemen inlin <span> (jika lupa alasannya, silakan lihat XHTML: perekonstruksi situs）。

Pemilih satu, banyak penggunaan

Meskipun elemen yang ditandai dengan sidebar hanya dapat muncul sekali dalam dokumen, pemilih id ini sebagai pemilih turun dapat digunakan banyak kali:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Di sini, elemen p di dalam sidebar yang berbeda dengan elemen p lain di halaman, elemen p di dalam sidebar mendapatkan pengaturan khusus, serta elemen h2 di dalam sidebar yang berbeda dengan semua elemen h2 lain di halaman, elemen h2 di dalam sidebar juga mendapatkan pengaturan khusus lainnya.

Pemilihan pencabut sendiri

Pemilihan pencabut id bahkan jika tidak digunakan untuk menciptakan pemilihan pencabut turun, masih dapat berfungsi sendiri:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Menurut aturan ini, elemen dengan id sidebar akan memiliki batas garis titik hitam lebar satu piksel, serta akan memiliki margin dalam lebar sepuluh piksel (padding, ruang dalam). Browser Windows/IE versi lama mungkin akan mengabaikan aturan ini kecuali Anda menentukan khusus pilihan elemen yang dimiliki pemilihan pencabut ini:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Konten Terkait

Jika Anda memerlukan pemahaman yang mendalam tentang pemilihan pencabut id, silakan baca panduan tingkat tinggi CodeW3C.com:Pemilihan ID Dengan Lebih Dari.