Pemilihan Pemilih Klasifikasi CSS Dalam Detail

Penunjuk kelas memungkinkan untuk menentukan gaya dengan cara yang independen dari elemen dokumen.

Pemilihan Pemilih Klasifikasi CSS

Penunjuk kelas memungkinkan untuk menentukan gaya dengan cara yang independen dari elemen dokumen.

Penunjuk ini dapat digunakan secara terpisah, atau digabungkan dengan elemen lain.

Pemberitahuan:Hanya dengan menandai dokumen dengan benar, penunjuk ini dapat digunakan, jadi penggunaan kedua penunjuk ini biasanya memerlukan beberapa konsep dan perencanaan.

Metode yang paling sering digunakan untuk menerapkan gaya tanpa memperhatikan elemen desain khusus adalah menggunakan penunjuk kelas.

Ubah kode HTML

Sebelum menggunakan penunjuk kelas, perlu mengubah tanda markas dokumen untuk memastikan penunjuk kelas bekerja dengan baik.

Untuk menghubungkan gaya penunjuk kelas dengan elemen, kelas harus disetel dengan nilai yang sesuai. Lihat kode HTML di bawah ini:

<h1 class="important">
Judul ini sangat penting.
</h1>
<p class="important">
Paragraf ini sangat penting.
</p>

Dalam kode di atas, kelas kedua elemen disetel menjadi important: judul pertama (elemen h1), paragraf kedua (elemen p).

Sintaks

Lalu kami menggunakan sintaks berikut untuk menerapkan gaya pada elemen yang diklasifikasikan ini, yaitu titik (.) sebelum nama kelas, dan diikuti dengan wildcard selector:

*.important {color:red;}

Jika Anda hanya ingin memilih elemen yang memiliki nama kelas yang sama, Anda dapat mengabaikan selector wildcard di selector kelas, yang tidak mengakibatkan dampak buruk apapun:

.important {color:red;}

Coba Sendiri

Gabungkan Selector Elemen

Selector kelas dapat digabungkan dengan selector elemen.

Contohnya, mungkin Anda hanya ingin hanya paragraf yang menampilkan teks merah:

p.important {color:red;}

Selector sekarang akan cocok dengan semua elemen p yang memiliki atribut class important, tetapi elemen jenis lain tidak cocok, terlepas dari apakah memiliki atribut class ini. Selector p.important diartikan sebagai: "Semua paragraf yang memiliki atribut class important". Karena elemen h1 bukan paragraf, selector ini tidak cocok, jadi elemen h1 tidak akan menjadi teks biru.

Jika Anda benar-benar ingin menentukan gaya yang berbeda untuk elemen h1, Anda dapat menggunakan selector h1.important:

p.important {color:red;}
h1.important {color:blue;}

Coba Sendiri

Pilih Klas Multi CSS

Pada bagian sebelumnya, kami menangani kasus nilai class yang mengandung satu kata. Dalam HTML, nilai class dapat berisi daftar kata, yang dipisahkan dengan spasi. Contohnya, jika Anda ingin menandai elemen khusus untuk penting (important) dan peringatan (warning), dapat ditulis seperti ini:

<p class="important warning">
Paragraf ini adalah peringatan yang sangat penting.
</p>

Urutan kata ini tak penting, dapat ditulis warning important juga.

Kami asumsikan bahwa semua elemen dengan class important adalah tebal, dan semua elemen dengan class warning adalah miring, serta semua elemen yang mengandung important dan warning juga memiliki latar belakang emas. Dapat ditulis seperti ini:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Coba Sendiri

Dengan menghubungkan dua selector kelas bersamaan, hanya dapat dipilihMengandung nama kelas ini sekaliguselemen (urutan nama kelas dapat berbeda).

Jika pemilihan pemilih multi-class termasuk nama kelas yang tidak ada dalam daftar nama kelas, pengiriman akan gagal. Lihat aturan berikut:

.important.urgent {background:silver;}

Tidak mengecewakan, pemilihan pemilih ini hanya akan cocok dengan elemen p yang classnya mengandung kata important dan urgent. Jadi, jika class atribut elemen p hanya mengandung kata important dan warning, ia tidak akan cocok. Namun, ia dapat cocok dengan elemen berikut:

<p class="important urgent warning">
Paragraf ini adalah peringatan yang sangat penting dan mendesak.
</p>

Coba Sendiri

Pertimbangan Penting:Dahulu versi Internet Explorer yang berbeda di platform yang berbeda tidak dapat memproses pemilihan multi-class dengan benar di bawah IE7.