Pemilihan Pemilih Klas Detaill CSS

Penunjuk kelas memungkinkan untuk menentukan gaya tanpa bergantung pada elemen dokumen.

Pemilihan Pemilih Klas CSS

Penunjuk kelas memungkinkan untuk menentukan gaya tanpa bergantung pada elemen dokumen.

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

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

Yang paling sering digunakan untuk menerapkan gaya tanpa memandang elemen desain khusus adalah menggunakan penunjuk kelas.

Ubah kod HTML

Sebelum menggunakan penunjuk kelas, perlu mengubah tanda markah dokumen untuk memastikan penunjuk kelas berfungsi dengan baik.

Untuk menghubungkan gaya penunjuk kelas dengan elemen, kelas harus diset ke nilai yang sesuai. Lihat kod HTML di bawah ini:

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

Dalam kod di atas, kelas kedua elemen diset ke penting: judul pertama (elemen h1), paragraf kedua (elemen p).

Sintaks

Lalu kami menggunakan sintaks berikut untuk menerapkan gaya pada elemen yang diklasifikasikan ini, yaitu titik di depan nama kelas, lalu gabungkan dengan pemilih garis bawah:

*.penting {warna:merah;}

Jika Anda hanya ingin memilih elemen yang memiliki nama kelas yang sama, Anda dapat mengabaikan pemilih garis bawah di pemilih kelas, yang tidak ada dampak buruknya:

.penting {warna:merah;}

Coba Sendiri

Gabungkan Pemilih Elemen

Pemilih kelas dapat digabungkan dengan pemilih elemen.

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

p.penting {warna:merah;}

Pemilih sekarang akan cocok dengan semua elemen p yang memiliki atribut class penting, tetapi elemen jenis lain tidak cocok, apapun ada atribut class ini. Pemilih p.penting diartikan sebagai: "Semua paragraf yang memiliki atribut class penting". Karena elemen h1 bukan paragraf, pemilih ini tidak cocok, jadi elemen h1 tidak akan menjadi teks merah.

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

p.penting {warna:merah;}
h1.penting {warna:biru;}

Coba Sendiri

Pemilih Klasifikasi Banyak CSS

Dalam bab sebelumnya, kami menangani kasus nilai class berisi kata satu. Dalam HTML, nilai class dapat berisi daftar kata, yang dipisahkan oleh spasi. Contohnya, jika Anda ingin menandai elemen khusus untuk penting (penting) dan peringatan (peringatan), dapat ditulis:

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

Perurutan kata ini tak penting, boleh ditulis peringatan penting juga.

Kami asumsikan bahwa semua elemen dengan class important adalah tebal, dan semua elemen dengan class peringatan adalah italik, dan semua elemen yang mengandung penting dan peringatan ada latarbelakang perak. Dapat ditulis:

.penting {berat-tulis:tebal;}
.peringatan { gaya-tulis:italis;}
.penting.peringatan {latarbelakang:perak;}

Coba Sendiri

Dengan menggabungkan dua pemilih kelas bersamaan, hanya dapat dipilihTermasuk nama kelas ini sekaligus.dalam elemen (tidak penting urutan nama kelas).

Jika pemilihan berkelas berisi nama kelas yang tidak ada dalam daftar nama kelas, pemilihan akan gagal. Lihat aturan berikut:

.important.urgent {background:silver;}

Tidak seperti yang diharapkan, pemilihan ini hanya akan padan kepada elemen p yang mengandung kata 'important' dan 'urgent' dalam atribut class. Jadi, jika atribut class elemen p hanya mengandung kata 'important' dan 'warning', ia tidak akan padan. Namun, ia akan padan kepada elemen berikut:

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

Coba Sendiri

Perhatian Penting:Dahulu daripada versi IE7, Internet Explorer yang berbeda di platform yang berbeda tidak dapat memproses pemilihan berkelas dengan benar.