← CSS49 / 62
:is() untuk selector yang rapi
:is() meringkas selector panjang: :is(h1, h2, h3) { margin-block: 0.5em } menggantikan tiga aturan terpisah. Catatan penting untuk debugging: specificity :is() mengikuti argumen terkuat di dalamnya, sedangkan :where() yang mirip selalu bernilai nol — pakai :where() untuk gaya dasar yang mudah ditimpa. :is() juga memangkas selector panjang seperti .artikel h1, .artikel h2, .artikel h3 menjadi satu baris yang jauh lebih mudah dirawat.
👀 Contoh dulu
/* panjang dan berulang */
.menu a, .menu button, .menu span { padding: 4px; }
/* ringkas, sama artinya */
.menu :is(a, button, span) { padding: 4px; }Hasilnya: Ketiga jenis elemen di dalam .menu mendapat padding yang sama.
💡 Kalau ingin selector yang mudah ditimpa nanti, pakai :where() — specificity-nya nol.
📝 Sekarang giliranmu
Gunakan :is(h1, h2, h3) untuk memberi color: #1d4ed8 pada ketiga heading sekaligus.
Preview