Universal Selector

Sejauh ini selector yang kita tulis selalu menyasar jenis elemen tertentu: satu aturan untuk p, satu aturan untuk h1. Kadang kita justru menginginkan kebalikannya — satu aturan yang menyentuh semua elemen sekaligus, misalnya saat merapikan jarak bawaan browser sebelum mulai mendesain. Untuk kebutuhan itu CSS menyediakan universal selector yang ditulis dengan satu karakter saja: *. Pada chapter ini kita membahas cara kerjanya, tiga kegunaan yang paling sering dipakai, serta satu sifat khusus yang membuatnya unik dibanding selector lain.

Memilih Semua Elemen Sekaligus #

Universal selector ditulis dengan tanda bintang * dan mencocokkan setiap elemen di halaman tanpa memandang jenisnya. Satu aturan berikut memberi margin nol pada p, h1, ul, section, hingga elemen apa pun yang ada di dokumen:

* {
  margin: 0;
  padding: 0;
}

Cara membacanya persis seperti selector lain: pilih semua elemen, lalu terapkan declaration di dalam kurung kurawal. Bedanya hanya cakupan: selector p menyaratkan jenis tag, sedangkan * menerima semua tag tanpa syarat. Berkat cakupan luas itu, satu baris selector dapat menggantikan puluhan aturan per-jenis-elemen.

Tiga Kegunaan yang Sering Dipakai #

Merapikan Margin dan Padding Bawaan #

Contoh di atas inilah bentuk reset paling sederhana. Browser memberi margin default pada h1–h6, p, ul, dan body; menghapusnya di awal membuat setiap jarak di halaman jadi keputusan kita, bukan sisa bawaan browser. Tanpa reset, kita sering harus mengoreksi margin berulang-ulang di berbagai komponen.

box-sizing: border-box Global #

* {
  box-sizing: border-box;
}

Aturan ini membuat nilai width mencakup padding dan border, sehingga ukuran kotak lebih mudah diprediksi. Semua demo pada course ini memulai dengan margin: 0 dan box-sizing: border-box secara global — persis pola di atas. Versi lengkapnya biasanya juga menyertakan ::before dan ::after; dua pseudo-element itu kita pelajari pada section tersendiri.

Membatasi Aturan pada Satu Area #

.kartu-ringkasan * {
  margin: 0;
}

Demo berikut menampilkan dua panel dengan markup yang setara; panel kanan memakai universal selector yang dibatasi area untuk menghapus margin semua turunannya:

Spasi di antara .kartu-ringkasan dan * membuat aturan hanya menyasar turunan kartu tersebut, bukan elemen lain di halaman. Pola ini disebut scoping: kekuatan selector luas yang dipagari area tertentu. Kombinator spasi ini kita bedah lebih dalam pada chapter Descendant Selector.

Specificity Nol dan Soal Performa #

Universal selector punya satu keunikan: bobot specificity-nya nol — bukan nol kecil, tetapi benar-benar nol dari semua jenis. Artinya, aturan apa pun yang memakai class, id, bahkan element selector, akan menimpanya. Sifat ini menjadikan * ideal untuk nilai awal yang memang dirancang untuk ditimpa:

* {
  color: #1f2933;
}

.prolog {
  color: #14503a;
}

Class menang karena bobotnya lebih tinggi; urutan penulisan tidak berperan di sini. Pembahasan lengkapnya menanti di section Cascade, Inheritance, dan Specificity.

Soal performa, di forum lama sering muncul anggapan bahwa * membuat halaman berat. Kenyataannya browser modern mengoptimalkan universal selector dengan sangat baik; reset ringan seperti contoh di atas dipakai situs-situs besar setiap hari. Yang tetap perlu dijaga adalah kebiasaan umum: hindari menempelkan * di tengah rantai selector panjang tanpa alasan, karena aturan yang menyasar banyak elemen memang memberi pekerjaan lebih banyak pada browser.

Kesalahan Umum #

Ringkasan #

Universal selector * memilih semua elemen sekaligus, sehingga paling pas untuk nilai awal: reset jarak, box-sizing global, dan pembatasan area lewat pola .area *. Bobot specificity-nya nol, jadi aturan apa pun yang lebih spesifik mudah menimpanya — persis peran pembuka yang siap digantikan. Chapter berikutnya membahas element selector: lebih sempit daripada *, tetapi tetap luas, dan menjadi lapisan dasar tipografi halaman.