Selector adalah bagian CSS yang paling sering dicari ulang. Penulisan property seperti margin mudah diingat, tetapi pola pencocokan seperti :nth-of-type() atau :has() butuh lihat ulang berkali-kali sebelum melekat. Chapter ini merangkum selector yang sudah kita pelajari ke dalam satu tabel singkat, lalu mengarahkan kamu ke halaman referensi resmi untuk pola yang lebih jarang dipakai.
Cheat Sheet Selector Course Ini #
Tabel berikut merangkum selector inti yang sudah kita gunakan sepanjang course:
| Selector | Contoh | Keterangan |
|---|---|---|
| Type | p | Memilih semua elemen <p> |
| Class | .kartu | Memilih elemen dengan class="kartu" |
| ID | #header-utama | Memilih satu elemen dengan id tersebut |
| Descendant | .kartu p | Memilih <p> di dalam .kartu pada kedalaman apa pun |
| Child | .nav-utama > li | Memilih <li> yang menjadi anak langsung |
| Attribute | a[href^="https"] | Memilih tautan yang berawalan https |
| Pseudo-class state | button:hover | Memilih tombol saat kursor berada di atasnya |
| Pseudo-class fokus | input:focus-visible | Memilih elemen yang mendapat fokus keyboard |
| Posisi | li:nth-child(2) | Memilih anak kedua dari induknya |
| Pseudo-element | p::first-line | Mengatur baris pertama sebuah paragraf |
Tabel di atas sengaja ringkas. Untuk masing-masing baris, section Selectors masih menyimpan penjelasan lengkap beserta contoh yang bisa kamu jalankan ulang.
Satu catatan kecil yang membantu saat membaca dokumentasi lama: pseudo-element dahulu ditulis dengan satu titik dua seperti :before, sedangkan standar modern mewajibkan dua titik dua seperti ::first-line. Browser lama masih menerima bentuk satu titik dua, tetapi tulisan baru sebaiknya selalu mengikuti bentuk modern.
Referensi Resmi di MDN #
Halaman pusat selector MDN memuat daftar lengkap, termasuk pola yang belum kita sentuh di course ini:
- MDN CSS Selectors — indeks seluruh selector dengan tautan ke halaman detailnya.
- MDN :is()
— helper untuk mengelompokkan beberapa selector sekaligus, misalnya
:is(h1, h2, h3). - MDN :has()
— selector relasional untuk memilih induk berdasarkan isinya, misalnya
.kartu:has(img).
Dua selector terakhir adalah modernisasi yang penting. :is() merampingkan daftar selector yang panjang, sedangkan :has() membuka pola styling yang sebelumnya hanya bisa dilakukan dengan JavaScript. Keduanya didukung seluruh browser modern, jadi aman dipakai untuk proyek baru.
Cara Memakai Referensi Selector #
Ketika menemukan selector asing di kode orang lain, lakukan tiga langkah ini:
- Salin polanya ke mesin pencari dengan kata kunci
css selector, lalu buka halaman MDN yang cocok. - Baca contoh pada bagian Try it untuk melihat polanya bekerja pada markup nyata.
- Replikasi pola tersebut pada proyekmu dengan class bermakna, seperti contoh berikut:
/* Kartu yang berisi gambar mendapat bingkai khusus */
.kartu-produk:has(img) {
border-color: #1f6f54;
}Demo berikut menjalankan selector tersebut pada tiga kartu produk:
Terakhir, jadikan cheat sheet ini hidup. Setiap kali menemukan selector baru yang berguna di dokumentasi atau kode orang lain, tambahkan satu baris pada catatan pribadimu dengan format tabel yang sama: pola, contoh, dan keterangan. Catatan yang terus bertumbuh seperti ini menjadi referensi paling personal dan paling sering kamu buka.
Ringkasan #
Tabel cheat sheet di atas mengulang selector inti course ini, sementara halaman MDN CSS Selectors menjadi indeks lengkap untuk semua pola lainnya. :is() dan :has() adalah dua tambahan modern yang paling layak dipelajari berikutnya karena mengurangi kebutuhan class tambahan. Selanjutnya kita berpindah dari pencocokan elemen ke halaman referensi property, yang strukturnya sedikit berbeda.