Class Selector

Element selector mengatur semua elemen sejenis, padahal desain nyata hampir selalu menuntut pengecualian: satu tombol ditonjolkan, satu paragraf diberi perhatian, satu kartu diberi latar berbeda. Untuk kebutuhan itulah class selector menjadi aturan yang paling sering kita tulis sepanjang kerja CSS — cukup tandai elemen dengan atribut class, lalu panggil namanya di CSS dengan tanda titik. Chapter ini membahas cara kerjanya, pola menggabungkan beberapa class pada satu elemen, dan konvensi penamaan yang membuat kode tetap sehat saat proyek membesar.

Menandai dan Memanggil #

<p class="pengantar">Selamat datang di toko kami.</p>

.pengantar {
  font-size: 18px;
  color: #14503a;
}

Demo berikut menaruh class itu pada satu dari tiga paragraf:

Selector class menyasar nilai atribut, bukan jenis tag. Satu class yang sama bisa dipasang pada p, div, button, atau jenis elemen apa pun — bahkan beberapa jenis sekaligus. Inilah yang membuat class sangat dapat dipakai ulang: satu definisi .tombol melayani semua tombol di seluruh halaman, dan perbaikan cukup dilakukan di satu tempat.

Satu Elemen, Banyak Class #

Nilai atribut class boleh memuat lebih dari satu nama, dipisah spasi. Setiap class bekerja terpisah dan gayanya menumpuk pada elemen yang sama — pola dasar untuk menyusun tampilan dari potongan kecil:

.tombol {
  padding: 10px 18px;
  border: 1px solid #14503a;
  border-radius: 8px;
  background-color: #ffffff;
  color: #14503a;
}

.tombol-utama {
  background-color: #14503a;
  color: #ffffff;
}

.tombol-besar {
  padding: 14px 26px;
  font-size: 18px;
}

<button type="button" class="tombol">Simpan</button>
<button type="button" class="tombol tombol-utama">Bayar Sekarang</button>
<button type="button" class="tombol tombol-utama tombol-besar">Daftar Webinar</button>

Demo berikut memakai markup yang sama seperti contoh di atas; amati bagaimana setiap class berkontribusi tanpa saling menghapus:

Mari kita telaah polanya:

1. .tombol menyediakan fondasi yang sama untuk semua tombol: jarak, border, dan sudut.
2. .tombol-utama hanya mengubah latar dan warna teks; properti lain tetap datang dari deklarasi .tombol pada elemen yang sama.
3. .tombol-besar hanya mengubah ukuran, sehingga bisa dipasangkan dengan varian mana pun.
4. Bila dua class mengatur property yang sama, urutan penulisan di berkas CSS yang menentukan pemenangnya — prinsip cascade yang kita dalami pada section tersendiri.

Tidak ada duplikasi deklarasi di sini: setiap aspek tampilan didefinisikan sekali, lalu dikomposisikan dari potongan-potongan class.

Mengunci Dua Class Sekaligus #

Selain dipisah spasi, dua nama class juga bisa ditulis berdempet pada selector tanpa spasi. Pola ini menyasar elemen yang memiliki keduanya:

/* Hanya elemen dengan class tombol DAN tombol-utama */
.tombol.tombol-utama {
  box-shadow: 0 2px 6px rgb(20 80 58 / 0.3);
}

Membedakan koma dan dempet penting: .tombol, .tombol-utama memilih dua kelompok elemen berbeda (selector list dari section Sintaks Dasar), sedangkan .tombol.tombol-utama memilih satu elemen yang memakai keduanya. Satu spasi atau satu koma mengubah makna seluruh aturan.

Konvensi Penamaan yang Bertahan Lama #

Nama class ditulis puluhan kali lintas berkas HTML dan CSS, sehingga layak dirancang dengan serius:

• Gunakan huruf kecil dengan tanda hubung (kebab-case): tombol-utama, kartu-produk, panel-harga.
• Namai berdasarkan peran, bukan tampilan: .tombol-utama tetap masuk akal saat tema berganti, sedangkan .hijau menjadi menyesatkan begitu palet berubah.
• Hindari nomor urut tanpa makna seperti box1 atau teks2; nama yang baik membantu pembaca berikutnya memahami maksud tanpa membuka markup.

Kesalahan Umum #

Ringkasan #

Class selector menyasar elemen lewat atribut class, bekerja lintas jenis tag, dan dapat dipasang berulang — kombinasi inilah yang menjadikannya alat utama styling. Banyak class pada satu elemen memungkinkan gaya disusun dari potongan kecil: dasar, varian, dan ukuran yang saling menumpuk. Chapter berikutnya membahas id selector, yang mengambil arah berlawanan: satu identitas tunggal dengan bobot yang jauh lebih besar.