Pemilihan Pemilihan id Detaill CSS

Pemilih ID mengijinkan untuk menentukan gaya yang terpisah dari elemen dokumen.

Pemilih ID CSS

Dalam beberapa hal, pemilih ID mirip dengan pemilih kelas, tetapi ada beberapa perbedaan penting.

Sintaks

Pertama, pemilih ID diawali dengan tanda # - disebut tanda papan, tanda catur, atau tanda titik.

Lihat aturan berikut:

*#intro {tebal:tebal;}

Seperti pemilih kelas, pemilih ID dapat mengabaikan pemilih wildcard. Contoh sebelumnya juga dapat ditulis seperti berikut:

#intro {font-weight:bold;}

Efek pemilih ini akan sama.

Perbedaan kedua adalah pemilih ID tidak mengutip nilai atribut class, pasti hal ini mengutip nilai atribut id.

Berikut adalah contoh pemilih ID yang sebenarnya:

<p id="intro">Ini adalah paragraf pengenalan.</p>

Coba sendiri

Pemilih kelas atau pemilih ID?

Pada bab pemilih kelas, kami telah menjelaskan bahwa kelas dapat ditugaskan kepada banyak elemen. Pada bab sebelumnya, nama kelas 'important' diterapkan kepada elemen p dan h1, dan dapat diterapkan kepada elemen lainnya pula.

Perbedaan 1: Hanya dapat digunakan sekali dalam dokumen

Berbeda dengan kelas, pemilih ID hanya akan digunakan sekali dalam dokumen HTML.

Perbedaan 2: Tidak dapat digunakan daftar kata ID

Berbeda dengan pemilih kelas, pemilih ID tidak dapat digabungkan, karena atribut ID tidak mengijinkan daftar kata yang dipisahkan spasi.

Perbedaan 3: ID dapat mengandung makna lebih banyak

Seperti kelas, ID dapat dipilih secara terpisah dari elemen. Ada beberapa kasus dimana Anda tahu ada nilai ID khusus yang akan muncul dalam dokumen, tetapi Anda tidak tahu elemen mana yang akan memilikinya, jadi Anda ingin menyatakan pemilih ID yang terpisah. Contohnya, Anda mungkin tahu ada elemen dengan nilai ID 'mostImportant' dalam dokumen yang diberikan. Anda tidak tahu apakah hal yang paling penting adalah paragraf, frasa, item dalam daftar, atau judul subbagian. Anda hanya tahu bahwa setiap dokumen akan memiliki konten yang penting ini, yang dapat muncul di dalam elemen mana saja, dan hanya muncul sekali. Dalam kasus ini, dapat ditulis aturan seperti berikut:

#mostImportant {warna:merah; latarbelakang:kelabu;}

Aturan ini akan cocok dengan elemen-elemen berikut (elemen-elemen ini tidak boleh muncul bersamaan dalam dokumen yang sama, karena mereka memiliki nilai ID yang sama):

<h1 id="mostImportant"Ini penting!
<em id="mostImportant"Ini penting!
<ul id="mostImportant">Ini penting!</ul>

Coba sendiri:

Berbeda Huruf Besar-Kecil

Perhatikan, pemilihan klas dan id mungkin berbeda huruf besar-kecil. Ini tergantung bahasa dokumen. HTML dan XHTML mendefinisikan klas dan id nilai huruf besar-kecil, jadi huruf besar-kecil klas dan id harus cocok dengan nilai yang relevan di dokumen.

Dahulu, untuk CSS dan HTML di bawah ini, elemen tidak akan menjadi tebal:

#intro {font-weight:bold;}
<p id="Intro">Ini adalah paragraf pengenalan.</p>

Karena ukuran huruf i yang berbeda, pemilihan tidak akan cocok dengan elemen yang ada di atas.