Setelah kita mempelajari CSS Reset dan Box Sizing, sekarang saatnya menguasai selektor dasar CSS. Selektor adalah kunci utama dalam CSS karena menentukan elemen HTML mana yang akan diberi gaya. Tiga selektor dasar yang wajib dikuasai adalah: Tag Selector, Class Selector, dan ID Selector.

Apa Itu Selektor CSS?

Selektor CSS adalah pola yang digunakan untuk memilih elemen HTML mana yang akan diberi aturan CSS. Tanpa selektor yang tepat, CSS tidak akan bisa diterapkan ke elemen yang diinginkan.

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 Selektor Dasar

Selektor	Simbol	Contoh	Cakupan	Kapan Pakai?
Tag Selector	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 (spesifisitas)
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)
Rekomendasi untuk styling	Styling dasar global	Paling disarankan (reusable)	Hanya untuk elemen unik

Contoh Praktis: Halaman Profil dengan Ketiga Selektor

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Praktik Selektor CSS - Profil Saya</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* ========== TAG SELECTOR ========== */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        h1 {
            color: #1e293b;
            margin-bottom: 5px;
        }
        
        p {
            color: #475569;
            line-height: 1.6;
        }
        
        /* ========== CLASS SELECTOR ========== */
        .profile-card {
            background: white;
            border-radius: 24px;
            padding: 30px;
            max-width: 500px;
            width: 100%;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        .avatar {
            width: 120px;
            height: 120px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: white;
        }
        
        .title {
            color: #3b82f6;
            font-weight: 500;
            margin-bottom: 20px;
        }
        
        .bio {
            margin-bottom: 25px;
            text-align: justify;
        }
        
        .btn {
            display: inline-block;
            background-color: #3b82f6;
            color: white;
            padding: 10px 24px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
        }
        
        .social-links {
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .social-icon {
            text-decoration: none;
            font-size: 20px;
            transition: transform 0.2s;
        }
        
        .social-icon:hover {
            transform: translateY(-3px);
        }
        
        /* ========== ID SELECTOR ========== */
        #name {
            font-size: 28px;
            font-weight: bold;
            color: #1e293b;
        }
        
        #contact-btn {
            background-color: #22c55e;
        }
        
        #contact-btn:hover {
            background-color: #16a34a;
        }
        
        #footer-note {
            margin-top: 20px;
            font-size: 12px;
            color: #94a3b8;
        }
    </style>
</head>
<body>

    <div class="profile-card">
        <div class="avatar">
            JD
        </div>
        
        <h1 id="name">John Doe</h1>
        <p class="title">Frontend Developer</p>
        
        <p class="bio">
            Seorang pengembang web yang antusias dengan teknologi frontend. 
            Memiliki pengalaman dalam membangun website responsif dan interaktif 
            menggunakan HTML, CSS, dan JavaScript.
        </p>
        
        <a href="#" class="btn">Lihat Portofolio</a>
        <a href="#" class="btn" id="contact-btn">Hubungi Saya</a>
        
        <div class="social-links">
            <a href="#" class="social-icon">GitHub</a>
            <a href="#" class="social-icon">LinkedIn</a>
            <a href="#" class="social-icon">Twitter</a>
        </div>
        
        <p id="footer-note">© 2024 John Doe - All rights reserved</p>
    </div>

</body>
</html>

Hasil visual halaman profil:

John Doe

Frontend Developer

Seorang pengembang web yang antusias dengan teknologi frontend.

Portofolio Hubungi

GitHub LinkedIn Twitter

Kapan Menggunakan Selektor yang Mana?

Tag Selector → Gunakan untuk styling dasar global (misal: semua heading, semua paragraf, semua link).
Class Selector → Gunakan untuk styling komponen yang reusable (tombol, kartu, form, alert). Ini adalah pilihan utama untuk hampir semua kasus.
ID Selector → Gunakan untuk elemen yang benar-benar unik dan hanya muncul sekali (header, footer, logo, form login utama).

Best Practice:

Gunakan Class Selector untuk styling komponen (paling fleksibel dan reusable)
Gunakan Tag Selector untuk styling dasar global (reset, typography dasar)
Gunakan ID Selector hanya untuk elemen unik atau untuk JavaScript (karena getElementById sangat cepat)
Hindari menggunakan ID untuk styling jika memungkinkan, karena prioritasnya terlalu tinggi

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 (_).
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.

Debugging Tips:

Buka Developer Tools (F12) → tab Elements → inspect elemen → 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 Selektor CSS"
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: 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

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #3 - Mengenal CSS Reset dan Box Sizing
Artikel Selanjutnya: CSS Dasar #5 - Selektor Turunan dan Anak (Descendant & Child Selector)

CSS Dasar #4 - Selektor Dasar: Tag, Class, dan ID (Review + Contoh Praktis)

Apa Itu Selektor CSS?

Ringkasan Tiga Selektor 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

Contoh Praktis: Halaman Profil dengan Ketiga Selektor

John Doe

Kapan Menggunakan Selektor yang Mana?

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

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