Selector CSS Fundamental: Memilih Elemen yang Tepat
Dalam pengembangan website, CSS (Cascading Style Sheets) adalah teknologi penting yang digunakan untuk mempercantik dan mengatur tampilan halaman HTML. Salah satu komponen paling dasar dan fundamental dalam CSS adalah selector. Tanpa selector, kita tidak bisa menentukan elemen HTML mana yang ingin kita beri gaya. Oleh karena itu, memahami selector CSS dengan benar adalah langkah awal yang wajib dikuasai oleh setiap web developer.
🔍 Apa Itu CSS Selector?
Selector CSS adalah bagian dari sintaks CSS yang digunakan untuk memilih dan menargetkan elemen HTML tertentu, agar dapat diberi properti atau gaya visual.
Struktur umum CSS:
selector {
properti: nilai;
}Contoh:
p {
color: red;
}Artinya, semua elemen <p> di halaman akan diberi warna teks merah.
✅ Jenis-Jenis Selector CSS
Berikut adalah pembagian dasar dan lanjutan dari selector CSS yang wajib diketahui:
🔹 1. Selector Berdasarkan Nama Tag (Type Selector)
Menargetkan semua elemen HTML berdasarkan nama tag-nya.
h1 {
color: navy;
font-size: 32px;
}🟢 Akan memengaruhi semua elemen <h1> dalam dokumen HTML.
🔹 2. Selector Kelas (Class Selector)
Menargetkan elemen yang memiliki atribut class. Ditandai dengan titik (.) di depan nama class.
.card {
border: 1px solid #ccc;
padding: 20px;
}HTML:
<div class="card">Isi kartu</div>🟢 Bisa digunakan berulang kali pada banyak elemen.
🔹 3. Selector ID (ID Selector)
Menargetkan elemen berdasarkan atribut id. Ditandai dengan tanda pagar (#).
#navbar {
background-color: black;
color: white;
}HTML:
<div id="navbar">Menu</div>🔴 ID hanya boleh digunakan sekali dalam satu halaman.
🔹 4. Universal Selector
Selector * akan memilih semua elemen HTML.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}🟢 Umumnya digunakan untuk reset gaya bawaan browser.
🔹 5. Group Selector
Mengelompokkan beberapa selector agar diberi gaya yang sama.
h1, h2, p {
font-family: Arial, sans-serif;
}🟢 Lebih efisien daripada menulis satu per satu.
🔸 Selector Lanjutan (Advanced Selectors)
🔹 6. Descendant Selector (Turunan)
Memilih elemen yang berada di dalam elemen lain.
div p {
color: gray;
}HTML:
<div>
<p>Ini paragraf di dalam div</p>
</div>🟢 Berguna saat ingin menargetkan elemen secara hierarki.
🔹 7. Child Selector (Anak Langsung)
Hanya memilih elemen yang merupakan anak langsung, bukan cucu atau turunan lebih dalam.
ul > li {
list-style-type: square;
}🔹 8. Adjacent Sibling Selector
Memilih elemen yang langsung berada setelah elemen lain.
h1 + p {
font-style: italic;
}🔹 9. General Sibling Selector
Memilih semua elemen yang berada setelah elemen tertentu (tidak harus langsung).
h1 ~ p {
color: brown;
}🔸 Selector Khusus dan Pseudo-class
🔹 10. Pseudo-class Selector
Memberi gaya berdasarkan status atau kondisi elemen.
Contoh umum:
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}🔹 11. Attribute Selector
Memilih elemen berdasarkan atributnya.
input[type="text"] {
border: 1px solid gray;
}🧠 Tips Memilih Selector yang Efisien
- Gunakan class untuk gaya yang berulang.
- Gunakan id hanya untuk elemen unik.
- Hindari penggunaan selector terlalu rumit (misalnya terlalu banyak level turunan) karena akan sulit dipelihara.
- Gunakan kombinasi selector bila dibutuhkan, namun tetap utamakan kejelasan dan efisiensi.
