Setelah kita belajar 3 cara menambahkan CSS (inline, internal, external), sekarang saatnya memahami selector CSS. Selector adalah cara kita "memilih" elemen HTML mana yang akan diberi gaya. Ada 3 jenis selector dasar yang wajib kamu kuasai!

Apa Itu Selector CSS?

Selector CSS adalah pola yang digunakan untuk memilih elemen HTML yang akan diberi aturan CSS. Bayangkan selector seperti alat seleksi di Photoshop — kamu pilih area mana yang ingin diedit.

Analogi Sederhana:
• Tag Selector = "Semua murid di kelas ini" (semua elemen dengan tag tertentu)
• Class Selector = "Semua murid yang memakai seragam merah" (kelompok tertentu)
• ID Selector = "Murid bernama Budi" (unik, hanya satu orang)

Ringkasan Tiga Selector Dasar

Selector	Simbol	Contoh	Cakupan	Kapan Pakai?
Tag Selector (Elemen)	Nama tag (tanpa simbol)	`p { }`, `h1 { }`	Semua elemen dengan tag itu	Styling default global
Class Selector	Titik `.`	`.card { }`, `.btn { }`	Semua elemen dengan class itu	Styling kelompok elemen (paling sering dipakai)
ID Selector	Pagar `#`	`#header { }`, `#logo { }`	Hanya 1 elemen unik	Elemen yang benar-benar unik (header, footer, form login)

1. Tag Selector (Elemen Selector)

Tag selector memilih semua elemen dengan nama tag tertentu. Ini adalah selector paling luas cakupannya.

Contoh:

<style>
    p {
        color: blue;
        font-size: 16px;
    }
    h1 {
        color: green;
        text-align: center;
    }
    div {
        background-color: #f0f4f8;
        padding: 10px;
        margin-bottom: 10px;
    }
</style>

<h1>Judul Utama</h1>
<p>Paragraf pertama akan berwarna biru.</p>
<p>Paragraf kedua juga biru.</p>
<div>Div ini punya background abu-abu muda.</div>

Hasilnya:

Judul Utama

Paragraf pertama akan berwarna biru.

Paragraf kedua juga biru.

Div ini punya background abu-abu muda.

Kelebihan & Kekurangan Tag Selector:
Kelebihan: Cepat, mudah, semua elemen dengan tag yang sama otomatis kena styling.
Kekurangan: Terlalu luas. Jika kamu ingin satu paragraf berbeda dari yang lain, tidak bisa pakai tag selector.

🏷2. Class Selector (`.`)

Class selector adalah selector paling sering digunakan dalam pengembangan web. Kita menambahkan atribut class ke elemen HTML, lalu memilihnya dengan titik (.) di CSS. Satu class bisa dipakai oleh banyak elemen, dan satu elemen bisa punya banyak class.

Contoh Dasar:

<style>
    .card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-bottom: 15px;
    }
    .btn-blue {
        background-color: #3b82f6;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    .text-center {
        text-align: center;
    }
</style>

<div class="card">
    <h3>Card 1</h3>
    <p>Ini adalah kartu pertama.</p>
    <button class="btn-blue">Klik Saya</button>
</div>

<div class="card text-center">
    <h3>Card 2 (Teks Tengah)</h3>
    <p>Kartu ini punya dua class: card dan text-center.</p>
</div>

Hasilnya:

Card 1

Ini adalah kartu pertama.

Card 2 (Teks Tengah)

Kartu ini punya dua class: card dan text-center.

Kelebihan Class Selector (PALING DISARANKAN):

Bisa digunakan berulang kali di banyak elemen
Satu elemen bisa punya banyak class (dipisah spasi)
Lebih spesifik daripada tag selector, tapi lebih fleksibel daripada ID
Ini adalah best practice untuk styling komponen (tombol, kartu, form)

3. ID Selector (`#`)

ID selector digunakan untuk elemen yang unik (hanya satu dalam satu halaman). Kita menambahkan atribut id ke elemen HTML, lalu memilihnya dengan pagar (#) di CSS.

Aturan Penting ID:

Setiap ID harus unik dalam satu halaman (tidak boleh ada dua elemen dengan ID sama)
Satu elemen hanya boleh punya SATU ID
ID memiliki prioritas lebih tinggi daripada class (akan kita pelajari di spesifisitas CSS)
Gunakan ID untuk elemen yang benar-benar unik (header, footer, form login utama)

Contoh ID Selector:

<style>
    #header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        text-align: center;
        border-radius: 10px;
    }
    #logo {
        font-size: 32px;
        font-weight: bold;
    }
    #main-content {
        padding: 20px;
        background: #f8fafc;
        margin-top: 20px;
        border-radius: 10px;
    }
</style>

<div id="header">
    <span id="logo">MyWebsite</span>
    <p>Belajar CSS Selector</p>
</div>

<div id="main-content">
    <h2>Selamat Datang!</h2>
    <p>Ini adalah konten utama. ID hanya boleh digunakan sekali.</p>
</div>

Hasilnya:

MyWebsite

Belajar CSS Selector

Selamat Datang!

Ini adalah konten utama. ID hanya boleh digunakan sekali.

Perbandingan Tag, Class, dan ID

Aspek	Tag Selector	Class Selector	ID Selector
Simbol	Tidak ada (langsung nama tag)	`.` (titik)	`#` (pagar)
Contoh	`p { }`, `h1 { }`	`.card { }`, `.btn { }`	`#header { }`, `#logo { }`
Bisa dipakai berapa kali?	Semua elemen dengan tag itu	Bisa banyak elemen (reusable)	Hanya 1 elemen (unik)
Spesifisitas (prioritas)	Rendah (1)	Sedang (10)	Tinggi (100)
Bisa untuk JavaScript?	Kurang efisien	Bisa (`getElementsByClassName`)	Sangat efisien (`getElementById`)
Rekomendasi untuk styling	Styling dasar global	Paling disarankan (reusable)	Hanya untuk elemen unik

Studi Kasus: Kombinasi Ketiga Selector

Berikut contoh halaman yang menggunakan tag selector, class selector, dan ID selector secara bersamaan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Praktik Selector CSS</title>
    <style>
        /* TAG SELECTOR - Styling dasar global */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f4f8;
        }
        
        h1 {
            color: #1e293b;
            border-left: 4px solid #3b82f6;
            padding-left: 15px;
        }
        
        p {
            line-height: 1.6;
            color: #334155;
        }
        
        /* CLASS SELECTOR - Styling komponen reusable */
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        
        .btn {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-secondary {
            background-color: #64748b;
            color: white;
        }
        
        .highlight {
            background-color: #fef9c3;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }
        
        /* ID SELECTOR - Styling elemen unik */
        #page-title {
            text-align: center;
            color: #3b82f6;
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        #footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            background: #1e293b;
            color: #94a3b8;
            border-radius: 12px;
        }
        
        #special-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        #special-card h3, #special-card p {
            color: white;
        }
    </style>
</head>
<body>

    <h1 id="page-title">Belajar CSS Selector</h1>
    
    <div class="card">
        <h2>Apa Itu Selector?</h2>
        <p>Selector adalah cara kita <span class="highlight">"memilih" elemen HTML</span> mana yang akan diberi gaya. Ada tiga jenis selector dasar: <strong>Tag Selector</strong>, <strong>Class Selector</strong>, dan <strong>ID Selector</strong>.</p>
        <a href="#" class="btn btn-primary">Baca Selengkapnya</a>
        <a href="#" class="btn btn-secondary">Lihat Contoh</a>
    </div>
    
    <div class="card">
        <h2>Perbandingan Selector</h2>
        <p><strong>Tag Selector</strong> memilih semua elemen dengan tag yang sama. <strong>Class Selector</strong> bisa dipakai berulang kali dan paling fleksibel. <strong>ID Selector</strong> hanya untuk satu elemen unik.</p>
    </div>
    
    <div id="special-card" class="card">
        <h3>Catatan Penting</h3>
        <p>ID selector memiliki prioritas lebih tinggi daripada class selector. Jika ada konflik, ID akan menang. Tapi untuk styling komponen, tetap disarankan menggunakan class.</p>
    </div>
    
    <div id="footer">
        <p>&copy; 2024 - Belajar CSS Selector. Dibuat untuk pemula.</p>
    </div>

</body>
</html>

Hasil visual dari kode di atas:

Belajar CSS Selector

Apa Itu Selector?

Selector adalah cara kita "memilih" elemen HTML mana yang akan diberi gaya. Ada tiga jenis selector dasar: Tag Selector, Class Selector, dan ID Selector.

Baca Selengkapnya Lihat Contoh

Perbandingan Selector

Tag Selector memilih semua elemen dengan tag yang sama. Class Selector bisa dipakai berulang kali dan paling fleksibel. ID Selector hanya untuk satu elemen unik.

Catatan Penting

ID selector memiliki prioritas lebih tinggi daripada class selector. Jika ada konflik, ID akan menang. Tapi untuk styling komponen, tetap disarankan menggunakan class.

Aturan Prioritas (Spesifisitas)

Jika ada konflik antara selector, mana yang menang? Berikut urutan prioritas dari yang terendah ke tertinggi:

Urutan Spesifisitas (dari rendah ke tinggi):

Tag Selector (p, h1, div) → nilai 1
Class Selector (.card, .btn) → nilai 10
ID Selector (#header, #logo) → nilai 100
Inline CSS (style="...") → nilai 1000
!important (paling tinggi, hindari jika tidak perlu) → nilai ∞

Contoh Spesifisitas:

<style>
    p { color: red; }           /* Tag selector: nilai 1 */
    .text { color: blue; }      /* Class selector: nilai 10 */
    #para { color: green; }     /* ID selector: nilai 100 */
</style>

<p id="para" class="text">Warna apa ini?</p>
<!-- HASIL: WARNA HIJAU (ID selector menang karena nilai 100 > 10 > 1) -->

Kesalahan Umum Pemula

Lupa menambahkan titik (.) untuk class → card { } (salah) vs .card { } (benar)
Lupa menambahkan pagar (#) untuk ID → header { } (salah) vs #header { } (benar)
Menggunakan ID yang sama untuk dua elemen → Tidak valid, hanya satu elemen boleh punya ID tertentu.
Spasi dalam nama class/ID → Nama class tidak boleh ada spasi. Gunakan strip (-) atau underscore (_). Contoh: class="my card" (salah, akan dianggap dua class).
Menggunakan angka di awal nama class/ID → Tidak valid. class="1card" (salah), class="card1" (benar).
Terlalu banyak menggunakan ID untuk styling → ID memiliki prioritas tinggi, bisa menyulitkan override nantinya. Gunakan class untuk styling komponen.

Debugging Tips:

Jika CSS tidak bekerja, buka Developer Tools (F12) → tab Elements → lihat apakah selector kamu muncul di panel Styles
Jika selector muncul tapi dicoret, berarti ada selector lain yang lebih spesifik (prioritas lebih tinggi)
Pastikan nama class/ID sama persis (case-sensitive, Btn berbeda dengan btn)

Latihan Singkat

Buat file HTML baru dengan judul "Latihan CSS Selector"
Gunakan tag selector untuk mengatur font semua paragraf menjadi Arial, ukuran 16px
Buat class selector bernama .card dengan background putih, padding 20px, border-radius 10px, dan box-shadow
Buat class selector bernama .btn-primary dengan background biru, warna putih, padding 10px 20px, border-radius 5px
Buat ID selector bernama #main-title dengan warna biru, teks tengah, ukuran 32px
Buat minimal 2 kartu (class="card") dengan tombol class="btn-primary"
Simpan dan buka di browser. Amati apakah semua selector bekerja

Intisari Hari Ini

Tag Selector → p { }, h1 { } (memilih semua elemen dengan tag itu)
Class Selector → .card { }, .btn { } (reusable, paling sering dipakai)
ID Selector → #header { }, #logo { } (unik, hanya satu elemen)
Class bisa dipakai berkali-kali dan satu elemen bisa punya banyak class
ID harus unik dalam satu halaman (hanya satu elemen)
Prioritas: ID > Class > Tag
Untuk styling komponen, gunakan Class, bukan ID

Tantangan Akhir Pekan: Buat sebuah halaman Galeri Produk untuk toko online fiktif. Persyaratan:

Gunakan tag selector untuk styling body (font, background, padding)
Gunakan class selector untuk komponen: .product-card, .product-title, .product-price, .btn-buy
Buat minimal 6 produk (6 kartu) dengan class yang sama (reusable)
Satu kartu spesial (misal: produk terlaris) diberi ID selector #best-seller dengan border emas atau warna berbeda
Gunakan ID selector untuk header halaman dan footer
Tambahkan efek hover pada kartu (scale, shadow, atau transisi)
Di bagian bawah halaman, buat kotak penjelasan yang menunjukkan mana yang menggunakan Tag, Class, dan ID selector

Bonus: Buat tombol filter sederhana (Semua, Elektronik, Fashion) dengan class yang sama, tapi berbeda warna.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #20 - 3 Cara Menambahkan CSS ke HTML: Inline, Internal, External
Artikel Selanjutnya: HTML Dasar #22 - Properti CSS Wajib: color, background, font-size, text-align

HTML Dasar #21 - Mengenal Selector CSS: Tag, Class, ID

Apa Itu Selector CSS?

Ringkasan Tiga Selector Dasar

1. Tag Selector (Elemen Selector)

Contoh:

Judul Utama

🏷2. Class Selector (`.`)

Contoh Dasar:

Card 1

Card 2 (Teks Tengah)

3. ID Selector (`#`)

Contoh ID Selector:

Selamat Datang!

Perbandingan Tag, Class, dan ID

Studi Kasus: Kombinasi Ketiga Selector

Belajar CSS Selector

Apa Itu Selector?

Perbandingan Selector

Catatan Penting

Aturan Prioritas (Spesifisitas)

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

HTML Dasar #21 - Mengenal Selector CSS: Tag, Class, ID

Apa Itu Selector CSS?

Ringkasan Tiga Selector Dasar

1. Tag Selector (Elemen Selector)

Contoh:

Judul Utama

🏷2. Class Selector (.)

Contoh Dasar:

Card 1

Card 2 (Teks Tengah)

3. ID Selector (#)

Contoh ID Selector:

Selamat Datang!

Perbandingan Tag, Class, dan ID

Studi Kasus: Kombinasi Ketiga Selector

Belajar CSS Selector

Apa Itu Selector?

Perbandingan Selector

Catatan Penting

Aturan Prioritas (Spesifisitas)

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Android Kotlin - Lanjutan dari ASP.NET Core API

Android Kotlin #5: RecyclerView – Menampilkan Daftar Kategori Wisata

نموذج الاتصال

🏷2. Class Selector (`.`)

3. ID Selector (`#`)