Selector List

Pada section Sintaks Dasar kita sudah memakai koma untuk menerapkan satu rule ke banyak target sekaligus. Kemampuan itu tampak sederhana, tetapi menyimpan dua pertanyaan yang menentukan kualitas stylesheet: bagaimana browser mengevaluasi setiap anggota list, dan apa yang terjadi bila salah satu anggota salah tulis. Chapter ini membahas selector list secara menyeluruh, mulai dari perilaku evaluasinya, list yang toleran terhadap kesalahan lewat :is() dan :where(), hingga perbedaan specificity keduanya yang berguna saat menata default style.

Koma Berarti “Atau”, Evaluasi Tetap Per Anggota #

h2,
.subjudul,
p.lead {
  margin-bottom: 8px;
}

Browser membaca koma sebagai “atau”: rule di atas berlaku untuk h2, atau .subjudul, atau p.lead. Tiga sifat penting mengikuti cara baca ini:

• Setiap anggota dievaluasi secara independen terhadap setiap elemen di halaman.
• Urutan anggota tidak berpengaruh; list menghasilkan tampilan yang sama persis dengan kumpulan rule terpisah.
• Menambah atau menghapus satu anggota tidak mengubah cara anggota lain diproses.

Independensi ini menjadi fondasi sebelum kita masuk ke bagian berikutnya, karena justru pada satu titik kegagalan list yang harus dipertanggungjawabkan bersama oleh semua anggotanya.

Satu Anggota Tidak Valid, Seluruh Rule Dibuang #

Seperti sudah dibahas pada section Sintaks Dasar, browser membuang rule utuh bila satu anggota list tidak bisa diurai:

/* anggota ketiga salah eja: rule ini dibuang utuh oleh browser */
h2,
h3,
p:first-lin {
  color: #14503a;
}

Aturan tersebut memang disengaja oleh spesifikasi CSS. Parser menuntut selector list yang utuh agar perilakunya konsisten di semua browser: tanpa aturan ini, satu browser bisa menerapkan sebagian anggota sementara browser lain membuang semuanya, dan halaman yang sama tampil berbeda-beda. Konsekuensi praktisnya bagi kita: satu kesalahan ketik sepanjang sembilan huruf menghapus gaya seluruh anggota yang sebenarnya sehat, dan kerap kali tidak ada peringatan apa pun di halaman.

List Toleran dengan :is() dan :where() #

Fungsi :is() membungkus selector list menjadi satu pseudo-class. List di dalamnya bersifat forgiving: anggota yang tidak valid diabaikan, anggota yang valid tetap bekerja.

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

Anggota p:first-lin yang salah eja diabaikan tanpa memengaruhi yang lain; list yang sama tanpa :is() tidak menerapkan apa pun — karena itu :is() layak dipakai pada kelompok yang anggotanya banyak dan rawan salah ketik.

Demo berikut memakai list toleran dengan satu anggota yang sengaja salah eja:

Tambahkan anggota baru yang valid, misalnya h4, maka gaya langsung mengalir ke sana tanpa menyentuh anggota lain.

Manfaat keduanya bukan hanya toleransi kesalahan. Pemakaian :is() juga menyingkat kelompok yang berulang: penulisan :is(h1, h2, h3) .intro menggantikan tiga rule terpisah untuk h1 .intro, h2 .intro, dan h3 .intro.

Specificity: :is() Mengambil Tertinggi, :where() Selalu Nol #

Kedua fungsi berperilaku identik dalam pemilihan elemen, tetapi berbeda pada specificity:

/* dihitung sekelas id: mudah mengalahkan rule lain, sulit ditimpa */
:is(#utama, h2) {
  color: #14503a;
}

/* specificity nol: sengaja mudah ditimpa rule mana pun */
:where(h2, h3) {
  margin-top: 28px;
}

Rule :is(#utama, h2) dihitung sekelas id, sehingga mengalahkan rule h2 biasa; sebaliknya rule :where(h2, h3) bisa ditimpa oleh h2 { margin-top: 16px; } yang ditulis sebelum maupun sesudahnya, karena specificity :where() bernilai nol. Pola :where() pas untuk nilai default yang harus mudah digeser. Rincian cara browser menghitung specificity dibedah tuntas pada section Cascade, Inheritance, dan Specificity.

Kapan Mengelompokkan, Kapan Memisahkan #

Satu kebiasaan kecil membantu pemeliharaan: untuk list yang panjang, tulis satu anggota per baris seperti contoh pertama di atas, sehingga anggota yang ditambah atau dihapus mudah terlihat pada diff.

Ringkasan #

Selector list menempatkan banyak target dalam satu rule, dan browser mengevaluasi tiap anggota secara independen; tetapi list biasa membuang seluruh rule bila ada satu anggota yang tidak valid. :is() dan :where() mengubah perilaku itu menjadi toleran, dengan perbedaan penting pada specificity: :is() mengambil nilai tertinggi di antara anggotanya, sedangkan :where() selalu nol. Berikutnya kita melengkapi perangkat penggabungan dari sisi yang berbeda: menempelkan beberapa selector menjadi satu compound selector, lalu menyusunnya menjadi jalur yang tetap mudah dibaca.