Sering kali beberapa elemen berbeda jenis membutuhkan gaya yang sama persis: dua tingkat judul, dua varian kotak, atau sekumpulan tombol. Menulis aturan terpisah untuk tiap selector membuat stylesheet membludak dan mudah tidak sinkron. Selector list menyelesaikannya dengan koma: satu aturan untuk banyak selector. Chapter ini membahas cara kerjanya, jebakan ketika satu anggota list tidak dikenal browser, dan :is() sebagai jalan keluarnya.

Setiap selector di dalam list ditulis dipisah koma dan berdiri sebagai selector mandiri. Browser menggabungkan hasil pencocokan semua anggotanya, sehingga aturan berikut setara dengan dua aturan terpisah:

css 
h2,
h3 {
  color: rgb(30, 64, 175);
  font-weight: 700;
}

.kartu,
.panel {
  border: 1px solid rgb(203, 213, 225);
  border-radius: 8px;
}

Mari kita telaah aturan di atas baris demi baris:

  1. Baris 1–2 (h2, dan h3): dua type selector berbagi satu blok deklarasi; keduanya tampil biru tua dan tebal.
  2. Baris 7–8 (.kartu, dan .panel): dua class selector berbagi garis dan sudut membulat yang sama.
  3. Pemisahan ke baris baru hanyalah kerapian; yang wajib dijaga adalah tidak ada koma ganda maupun koma menggantung di akhir list, karena keduanya membuat selector kosong yang tidak valid.

Satu Anggota Tidak Valid, Seluruh Aturan Tidak Berlaku #

Dalam aturan biasa, selector list bersifat non-forgiving: bila satu anggota tidak dapat dipahami parser, seluruh aturan dibuang. Masalah ini lazim muncul ketika kita memakai pseudo-class yang belum didukung semua browser. Contohnya :focus-ring, usulan lama yang tak pernah dirilis sebagai pseudo-class:

css 
/* :focus-ring tidak dikenali parser — seluruh aturan ikut dibuang */
input:placeholder-shown,
:focus-ring {
  outline: 2px solid rgb(2, 132, 199);
}

Browser yang tidak mengenali :focus-ring membuang aturan itu utuh, termasuk bagian input:placeholder-shown yang seharusnya tetap berlaku. Satu anggota bermasalah membuat seluruh list gagal — dan gaya yang dirancang bersama ikut tidak muncul.

:is(): List yang Memafkan #

Fungsi :is() menerima selector list yang bersifat forgiving: anggota yang tidak dikenal diabaikan, anggota yang valid tetap bekerja. Dengan memindahkan list ke dalam :is(), contoh sebelumnya menjadi tahan terhadap perbedaan dukungan browser:

css 
:is(input:placeholder-shown, :focus-ring) {
  outline: 2px solid rgb(2, 132, 199);
}

Perilaku forgiving ini juga membuat list di dalam :is() aman untuk anggota yang menunjuk elemen yang mungkin tidak ada — pada demo, anggota .petak yang tidak terdapat di markup ditulis tanpa efek samping. Turunan langsungnya :where() bekerja dengan cara sama; perbedaan keduanya menyangkut specificity dan kita bedahkan pada Chapter Specificity . Ringkasan perilakunya ada pada Selector list di MDN .

Hasil di Browser:

text 
h2 dan judul di luar kartu sama-sama biru tua dan tebal:
color rgb(30, 64, 175), font-weight 700.
Kartu dan panel sama-sama bergaris abu-abu dengan sudut membulat:
border-color rgb(203, 213, 225), border-radius 8px.
Judul di dalam panel tampil hijau teal (color: rgb(13, 148, 136))
karena aturan :is(.panel, .petak) h3 cocok; anggota .petak diabaikan.

Demo pada chapter ini membawa enam elemen uji dengan atribut data-expected yang memverifikasi warna kedua tingkat judul, garis kartu dan panel, serta warna judul di dalam panel.