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