Selector Dasar

Setelah kamu tahu cara menggunakan CSS, sekarang pertanyaannya: Bagaimana cara memberi tahu CSS elemen mana yang ingin kita ubah warnanya atau ukurannya?

Di sinilah kita menggunakan Selector. Bayangkan selector itu seperti "alamat" atau "nama target". Kalau alamatnya salah, desainmu tidak akan pernah sampai ke elemen yang dimaksud.

1. Penjelasan Konsep

Ada lima selector dasar yang wajib kamu kuasai sebagai pondasi awal:

Universal Selector (*): Memilih semua elemen yang ada di halaman web tanpa terkecuali.
Element Selector: Memilih elemen berdasarkan nama tag HTML-nya (seperti p, h1, div).
Class Selector (.nama-class): Memilih elemen yang memiliki atribut class. Bisa digunakan berulang kali pada banyak elemen.
ID Selector (#nama-id): Memilih satu elemen spesifik yang memiliki atribut id. Sifatnya unik, hanya boleh ada satu nama ID yang sama dalam satu halaman atau file .html.
Descendant Selector (Spasi): Memilih elemen yang berada di dalam elemen lain. Contoh: "Pilih semua span yang ada di dalam article".

2. Contoh Kode

Coba kamu perhatikan kode HTML dan CSS di bawah ini. Perhatikan bagaimana setiap selector bekerja, buatlah project baru dengan nama folder CSS-SELECTOR.

index.html

style.css

<!DOCTYPE html>
<html>

<head>
    <title>Contoh Selector</title>
</head>

<body>
    <h1 id="judul-utama">Belajar Selector Dasar</h1>

    <p class="teks-biru">Ini adalah paragraf pertama dengan class.</p>
    <p class="teks-biru">Ini paragraf kedua, class-nya sama, jadi warnanya juga sama.</p>

    <div class="kontainer">
        <p>Paragraf ini ada di dalam div (descendant).</p>
        <span>Teks ini juga di dalam div.</span>
    </div>

    <span>Teks ini di luar div, jadi tidak kena aturan descendant.</span>

</body>

</html>

CSS:

/* 1. Universal Selector - Menghapus margin bawaan browser */
* {
    margin: 0;
    padding: 0;
}

/* 2. Element Selector - Semua span akan miring */
span {
    font-style: italic;
}

/* 3. Class Selector - Gunakan tanda titik (.) */
.teks-biru {
    color: dodgerblue;
}

/* 4. ID Selector - Gunakan tanda pagar (#) */
#judul-utama {
    text-align: center;
    text-transform: uppercase;
    color: #333;
}

/* 5. Descendant Selector - Memilih p hanya jika di dalam .kontainer */
.kontainer p {
    background-color: yellow;
    font-weight: bold;
}

3. Penjelasan Kode

*: Kita menggunakannya untuk "mereset" tampilan awal agar tidak ada jarak (margin/padding) liar dari browser.
#judul-utama: Karena ID sangat kuat dan unik, ini biasanya dipakai untuk komponen besar seperti Header atau Judul utama.
.teks-biru: Perhatikan di HTML ada dua paragraf yang memakai class ini. Keduanya otomatis berubah jadi biru. Sangat efisien, kan?
.kontainer p: Ini yang menarik. CSS hanya akan mencari tag <p> yang "anak buah"-nya .kontainer. Paragraf yang di atas (yang punya class teks-biru) tidak akan berwarna kuning karena dia bukan bagian dari .kontainer.

4. Best Practice

Ada beberapa aturan tidak tertulis yang sering dilupakan pemula:

Pilih Class dari pada ID untuk Styling: Sebisa mungkin, gunakan class untuk style elemen. Kenapa? Karena class bisa dipakai berulang kali. ID sebaiknya dipesan untuk keperluan JavaScript atau navigasi (anchor link).
Gunakan Nama yang Deskriptif: Hindari nama class seperti .merah atau .tulisan1. Gunakan nama yang menjelaskan fungsinya, misalnya .btn-submit atau .artikel-konten. Ini akan memudahkanmu saat kodingan sudah ribuan baris.
Case Sensitive & Tanpa Spasi: Nama class/id bersifat sensitif. .Menu tidak sama dengan .menu. Dan ingat, jangan pernah pakai spasi di nama class/id (gunakan tanda hubung/dash -).

Selector Dasar

1. Penjelasan Konsep

2. Contoh Kode

3. Penjelasan Kode

4. Best Practice

On this page