Pengenalan HTML 17
CSS Tingkat Lanjut

4. Macam-macam selector dan kombinasinya

Selector turunan hanyalah salah satu dari beberapa cara memilih elemen. Mengenal beberapa lainnya membuat kamu bisa menunjuk elemen secara tepat tanpa menambah banyak class. Bayangkan alamat rumah: "Jalan Mawar" menunjuk semua rumah di jalan itu, sedangkan "Jalan Mawar nomor 5" menunjuk satu rumah saja. Selector bekerja dengan cara serupa, dari yang umum hingga yang sangat khusus.

• p, span (dipisah koma) memilih semua p dan semua span sekaligus.
• div > p memilih p yang menjadi anak langsung dari div, bukan cucunya.
• h2 + p memilih p yang tepat berada setelah h2.
• p.penting memilih paragraf yang memiliki class penting.
• #menu memilih satu elemen dengan id menu.

<style>
.kartu > p { margin: 0; color: #334155; }
.kartu h2 + p { font-weight: bold; }
p.penting { color: #b91c1c; }
</style>

<div class="kartu">
    <h2>Pengumuman</h2>
    <p>Paragraf ini tepat setelah judul, jadi tebal.</p>
    <p class="penting">Paragraf penting berwarna merah.</p>
</div>

Pada contoh ini aturan pertama berlaku untuk dua paragraf. Aturan kedua hanya mengenai paragraf pertama karena ia tepat setelah h2. Aturan ketiga membuat paragraf kedua berwarna merah, dan karena p.penting lebih spesifik daripada .kartu > p, warna merah yang dipakai.

5. Pseudo-class: gaya berdasarkan keadaan

Pseudo-class memilih elemen berdasarkan keadaannya. Contoh paling terkenal adalah :hover, yang aktif saat kursor berada di atas elemen. Pada tabel kamu sudah melihat :nth-child(even) yang memilih baris genap. Ada pula :first-child dan :last-child untuk anak pertama dan terakhir, serta :focus untuk kolom input yang sedang dipilih.

<style>
.tombol {
    background: #2563eb;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    transition: background 0.2s;
}
.tombol:hover { background: #1e3a8a; }
input:focus   { outline: 3px solid #93c5fd; }
</style>

Properti transition membuat perubahan warna berlangsung halus selama 0,2 detik, bukan berganti mendadak. Sedikit sentuhan seperti ini sudah membuat halaman terasa hidup.

6. Menggabungkan class dengan bijak

Menggabung class yang kecil-kecil dan punya satu tugas disebut pendekatan utility. Contohnya .teks-biru hanya mengatur warna, .kotak hanya mengatur bentuk. Keuntungannya, kamu tidak menulis ulang aturan yang sama. Kekurangannya, atribut class bisa menjadi panjang. Keseimbangan terbaik adalah memberi nama berdasarkan makna (misalnya .kartu-berita) untuk komponen, dan memakai class kecil untuk penyesuaian.

7. Kesalahan yang sering terjadi

• Menaruh spasi pada selector gabungan: p .penting (turunan) berbeda arti dengan p.penting (paragraf ber-class penting).
• Berharap tr:nth-child(even) bekerja ketika tabel tidak memakai struktur baris yang benar.
• Memberi tabel border pada table, th, dan td tanpa border-collapse, sehingga garis tampak ganda.
• Membuat selector turunan yang terlalu panjang seperti div div div p span; sulit dirawat dan mudah rusak saat struktur berubah.

8. Latihan

1. Apa beda div p dan div > p?
   Lihat jawaban

   div p memilih semua p di dalam div pada tingkat mana pun; div > p hanya anak langsung.
2. Tuliskan aturan agar baris tabel disorot abu-abu muda saat kursor di atasnya.
   Lihat jawaban

   tr:hover { background-color: #f1f5f9; }
3. Mengapa border-collapse: collapse berguna pada tabel?
   Lihat jawaban

   Ia menyatukan garis sel yang bersebelahan sehingga tidak tampak ganda.
4. Rancang selector untuk memilih hanya paragraf pertama di dalam elemen ber-class artikel.
   Lihat jawaban

   .artikel p:first-child { ... }