Multiple Selectors

Dua heading berbeda yang membutuhkan gaya identik akan boros bila masing-masing harus punya rule sendiri: setiap perubahan warna harus dilakukan dua kali, dan kesalahan mengetik di salah satunya mudah lolos. CSS menjawab kebutuhan itu dengan selector list: beberapa selector yang dipisah koma dalam satu rule. Pada chapter ini kita membahas cara membaca dan menulisnya, satu perilaku penting yang jarang diketahui pemula, serta kapan menggabungkan lebih baik daripada memisahkan.

Selector List dengan Koma #

h1, h2, h3 {
  color: #14503a;
  font-weight: 700;
}

Penerapan satu list pada tiga tingkat judul:

Tanda koma dibaca sebagai “atau”: rule ini berlaku untuk h1, ATAU h2, ATAU h3. Penulisan tersebut ekuivalen dengan tiga rule terpisah berikut:

/* Tiga rule ini menghasilkan efek yang sama persis */
h1 { color: #14503a; font-weight: 700; }
h2 { color: #14503a; font-weight: 700; }
h3 { color: #14503a; font-weight: 700; }

Selector list adalah keringkasan penulisan, bukan fitur baru yang bekerja berbeda: browser memperlakukannya seperti kumpulan rule terpisah. Anggotanya boleh campur jenis — element dan class sekaligus dalam satu list:

h3,
.subjudul,
.label-promo {
  letter-spacing: 0.02em;
}

Untuk list yang panjang, tulis satu selector per baris seperti contoh di atas supaya tiap anggota mudah ditambah dan dihapus. Manfaat terbesarnya terasa saat pemeliharaan: mengubah satu nilai pada rule gabungan langsung mengalir ke semua anggota, tanpa perlu memburu tiga, lima, atau sepuluh rule yang isinya sama. Bila daftar anggota terus bertambah panjang hingga sulit dibaca, pertimbangkan memberi class bersama pada elemen-elemen itu — pendekatan yang dibahas pada section Selectors.

Satu Selector Rusak, Seluruh Rule Batal #

Ada satu perilaku yang wajib diwaspadai: bila satu anggota list tidak valid, browser membuang seluruh rule, bukan hanya anggota yang salah:

h2, h3, p:first-lin {
  color: #14503a;
}

Tulisan first-lin salah eja dari first-line. Karena anggota ketiga tidak dikenal parser, rule utuh dibuang; h2 dan h3 yang benar pun tidak mendapat apa-apa. Kesalahan kecil pada satu karakter di sini menghapus gaya dua selector yang sebenarnya sehat.

Perhatikan pula urutan anggota: list h2, h3 dan h3, h2 menghasilkan persis sama, jadi susunlah menurut keterbacaan — biasanya urutan kemunculan elemen di halaman.

Terkait penghapusan anggota, ada jebakan kecil yang sering lolos. Bila selector terakhir dihapus dari list, koma di depannya harus ikut dihapus; koma yang tertinggal di ujung membuat list tidak valid, dan sekali lagi seluruh rule ikut dibuang:

/* Koma tertinggal setelah penghapusan: rule ini gagal utuh */
.subjudul,
.label-promo,
{
  letter-spacing: 0.02em;
}

Kapan Menggabungkan, Kapan Memisahkan #

Menggabungkan menghemat baris, tetapi keringkasan bukan satu-satunya pertimbangan. Pertanyaan pemandunya: apakah gaya ini secara konsep milik satu kelompok, atau hanya kebetulan mirip?

Rule gabungan yang dipaksakan berisi kompromi (“padding-nya beda tipis saja, sama-samakan saja”) cenderung terurai sendiri saat desain berubah: salah satu anggota akhirnya butuh nilai berbeda, dan kita harus membongkar list. Mulai dari kelompok yang memang satu konsep, lalu pecah bila kebutuhannya benar-benar berpisah.

Demo berikut membagi warna lewat satu selector list dan menyerahkan jarak pada rule terpisah:

Perhatikan h2 sengaja tidak ikut berwarna karena tidak ada dalam list — tambahkan h2 ke baris pertama, dan seluruh judul langsung berubah serempak.

Ringkasan #

Selector list dengan koma memungkinkan satu rule melayani banyak target sekaligus, dan browser membacanya sebagai kumpulan rule yang setara. Sisi yang perlu diwaspadai: satu anggota yang tidak valid membatalkan seluruh rule, kecuali list dibungkus :is() yang bersifat forgiving. Gabungkan selector yang satu konsep, pisahkan yang hanya kebetulan mirip. Selanjutnya kita berpindah ke sisi value: menulis satu nilai untuk banyak sisi dengan shorthand.