Pemilihan Pemilihan ID Dalam Rangkaian

Pemilihan pengecualian ID memungkinkan untuk menentukan gaya yang terpisah dari elemen dokumen.

Pemilihan pengecualian ID CSS

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

Syarat

Pertama, pemilihan pengecualian ID diawali dengan tanda # - disebut papan nomor atau tanda titik.

Lihat aturan berikut:

*#intro {tebal:tebal;}

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

#intro {font-weight:bold;}

Efek pemilihan pengecualian ini akan sama.

Perbedaan kedua adalah pemilihan pengecualian ID tidak merujuk nilai atribut class, tak ada keraguan ia akan merujuk nilai atribut id.

Berikut adalah contoh pemilihan pengecualian ID yang nyata:

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

Coba sendiri

Pemilihan pengecualian kelas atau ID?

Pada bab pemilihan pengecualian kelas, kami telah menjelaskan bahwa kelas dapat ditugaskan ke banyak elemen. Pada bab sebelumnya, nama kelas important diaplikasikan ke elemen p dan h1, dan ia dapat diaplikasikan ke elemen lainnya pula.

Perbedaan 1: Hanya dapat digunakan sekali dalam dokumen

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

Perbedaan 2: Tidak dapat digunakan daftar kata ID

Berbeda dengan pemilihan pengecualian kelas, pemilihan pengecualian 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 situasi dimana Anda tahu ada nilai ID khusus yang akan muncul dalam dokumen, tetapi Anda tidak tahu elemen mana yang akan menampilkannya, jadi Anda ingin menyatakan pemilihan ID terpisah. Contohnya, Anda mungkin tahu ada elemen dengan nilai ID mostImportant di dalam dokumen yang diberikan. Anda tidak tahu apakah hal yang paling penting adalah paragraf, frasa, item dalam daftar, atau judul bagian. Anda hanya tahu bahwa setiap dokumen akan memiliki konten paling penting yang mungkin muncul di dalam elemen mana saja, dan hanya muncul sekali. Dalam situasi seperti ini, dapat ditulis aturan seperti berikut:

#palingTentu {warna:merah; latarbelakang: kuning;}

Peraturan 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:

Perbedaan Besarnya

Perhatikan, pemilihan klas dan ID mungkin berbeda besarnya. Ini tergantung bahasa dokumen. HTML dan XHTML menetapkan nilai klas dan ID sebagai berbeda besarnya, jadi besar kecilnya klas dan ID harus cocok dengan nilai yang relevan di dokumen.

Sebagai akibatnya, 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 padan kepada elemen di atas.