CSS 02: Selector Elemen, Class, ID, dan Kombinasi Dasar

Selector menentukan elemen HTML mana yang menerima sebuah aturan. Selector yang baik cukup spesifik untuk tujuan kita, tetapi tetap mudah digunakan ulang.

1. Selector Elemen, Class, dan ID

Jalankan contoh berikut dan cocokkan setiap selector dengan elemen pada bagian <body>.

Class diawali titik dan dapat digunakan pada banyak elemen. ID diawali # dan harus unik dalam satu halaman. Untuk styling yang dapat digunakan ulang, class biasanya lebih fleksibel.

2. Grouping, Descendant, dan Child

Koma berarti memilih beberapa selector. Spasi memilih semua keturunan, sedangkan > hanya memilih anak langsung.

Perhatikan bahwa .artikel p mengenai kedua paragraf. .artikel > h2 hanya mengenai h2 yang menjadi anak langsung .artikel.

Kesalahan Umum

• Lupa titik pada class atau pagar pada ID.
• Menamai class berdasarkan warna seperti .teks-merah, padahal fungsi komponennya mungkin berubah.
• Membuat selector sangat panjang dan sulit digunakan ulang.
• Menggunakan ID untuk setiap elemen hanya agar selector terasa kuat.

Latihan

Tambahkan tiga kartu dengan class .kartu. Beri satu kartu class tambahan .unggulan. Gunakan grouping untuk menyamakan font heading, lalu gunakan descendant selector untuk paragraf di dalam kartu.

Rangkuman

Mulailah dari selector paling sederhana. Class adalah pilihan utama untuk pola berulang, ID untuk identitas unik, dan combinator untuk menjelaskan hubungan struktur. Konflik antarselector dibahas pada CSS 02B.