Menggabungkan Selectors

Combinator yang sudah kita kenal selalu memisahkan dua elemen: spasi untuk descendant, > untuk child, + dan ~ untuk sibling. Ada cara menggabungkan yang lain dan tidak memakai pemisah apa pun: beberapa selector sederhana ditempelkan menjadi satu compound selector, dan seluruh syaratnya harus dipenuhi oleh satu elemen yang sama. Compound menjadi bahan bangunan dari jalur selector yang panjang: compound mengatur syarat pada satu elemen, combinator mengatur hubungan antar elemen. Chapter ini merangkai semuanya, mulai dari bentuk paling dasar sampai jalur campuran yang masih nyaman dibaca, plus satu risiko yang perlu dijaga: specificity yang membengkak.

Compound: Satu Elemen, Banyak Syarat #

Aturan penulisannya ketat: tanpa spasi, tanpa tanda, selector ditempelkan langsung. Selector p.kartu berarti elemen yang sekaligus paragraf dan membawa class kartu.

Perhatikan dua penulisan berikut yang hanya dibedakan satu karakter, tetapi maknanya jauh berbeda:

/* tanpa spasi: satu elemen yang sekaligus p dan .kartu */
p.kartu {
  border: 1px solid #d9d2c0;
}

/* dengan spasi: elemen .kartu yang berada di dalam p */
p .kartu {
  border: 1px solid #9ed2b5;
}

Demo berikut menyandingkan kedua penulisan pada satu markup:

Spasi adalah combinator, sedangkan tanpa spasi adalah syarat ganda pada elemen yang sama.

Menempelkan Dua Class Sekaligus #

Bentuk compound yang paling sering dipakai sehari-hari adalah class yang beranting. HTML boleh membawa banyak class sekaligus, dipisah spasi pada atribut class:

<article class="kartu">Kartu biasa</article>
<article class="kartu unggulan">Kartu pilihan editor</article>

.kartu {
  border: 1px solid #d9d2c0;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

/* hanya elemen yang membawa KEDUA class */
.kartu.unggulan {
  border: 2px solid #14503a;
  background-color: #eef7f1;
}

/* compound di depan, descendant di belakang */
.kartu.unggulan h3 {
  color: #14503a;
}

Demo berikut menerapkan pola class dasar plus class status pada tiga kartu:

Pola ini disebut class dasar plus class status: .kartu memuat gaya yang berlaku untuk semua kartu, .kartu.unggulan menambahkan lapisan untuk status tertentu. Dibanding menulis selector .unggulan saja, compound lebih terarah karena menjawab “unggulan yang mana” — kartu unggulan, bukan banner unggulan atau komentar unggulan yang kebetulan memakai class sama.

Urutan class pada atribut HTML tidak berpengaruh: class="kartu unggulan" dan class="unggulan kartu" identik bagi browser. Yang menentukan adalah kedua nama itu ada pada elemen yang sama.

Ketika ID Ikut Menempel #

Compound juga boleh memuat id, misalnya p#pengantar. Penulisan itu sah, tetapi jarang diperlukan: id sudah unik dalam satu halaman, sehingga penanda tambahan tidak menambah informasi apa pun dan hanya menaikkan specificity. Bila targetnya memang satu elemen id, tulis #pengantar saja.

Menyusun Jalur Campuran yang Terbaca #

Compound dan combinator saling melengkapi dalam satu jalur. Contoh yang umum dijumpai:

.nav-utama .menu > li > a {
  padding: 10px 14px;
}

Jalur dibaca dari kiri ke kanan: “di dalam .nav-utama, cari .menu, ambil li yang merupakan anak langsungnya, lalu tautan a di dalamnya”. Compound belum muncul di jalur ini, tetapi mudah disisipkan — misalnya .menu > li.aktif > a untuk menandai halaman yang sedang dibuka. Setiap bagian pada jalur yang sehat menambah informasi; bila ada bagian yang tidak mengubah hasil seleksi apa pun, bagian itu sebaiknya dibuang.

Dari Sederhana ke Kompleks #

Tabel di atas sekaligus urutan latihan yang baik: kuasai tiap tingkat sebelum menaikkan kompleksitasnya, dan berhenti pada tingkat yang sudah menjawab kebutuhan.

Ringkasan #

Compound selector menempelkan beberapa syarat pada satu elemen — element dengan class, class dengan class, hingga element dengan id — sedangkan combinator menyambungkan antar elemen; keduanya dirangkai menjadi jalur selector yang lengkap. Kunci kenyamanannya ada pada disiplin: setiap bagian harus menambah informasi, dan panjang jalur dibatasi agar specificity tidak membengkak. Chapter berikutnya menutup section ini dengan panduan memilih: selector mana yang paling tepat untuk setiap situasi.