CSS Dasar #6 - Selektor Sibling (Adjacent & General Sibling Selector)

Setelah kita mempelajari selektor turunan (descendant) dan anak (child), sekarang saatnya mengenal selektor sibling (saudara). Selektor ini digunakan untuk memilih elemen yang berada pada level yang sama (selevel / sejajar) dalam struktur HTML.

Apa Itu Selektor Sibling?

Selektor sibling digunakan untuk memilih elemen yang memiliki parent yang sama (selevel / bersaudara). Ada dua jenis selektor sibling:

Jenis	Simbol	Contoh	Penjelasan
Adjacent Sibling (Saudara Terdekat)	`+` (plus)	`h1 + p`	Memilih elemen yang langsung setelah elemen lain
General Sibling (Semua Saudara)	`~` (tilde)	`h1 ~ p`	Memilih semua elemen yang berada setelah elemen lain (tidak harus langsung)

Analogi Sederhana:
Bayangkan sebuah keluarga dengan anak-anak: Andi, Budi, Citra, dan Dedi.

- Adjacent Sibling (+): "Anak yang duduk PERSIS SETELAH Andi" → Hasilnya Budi.
- General Sibling (~): "Semua anak yang duduk SETELAH Andi" → Hasilnya Budi, Citra, Dedi.

1. Adjacent Sibling Selector (+)

Selektor adjacent sibling memilih elemen yang langsung berada setelah elemen lain (selevel). Ditandai dengan simbol + (plus).

Sintaks:

/* Memilih elemen B yang langsung setelah elemen A */
A + B {
    properti: nilai;
}

Contoh:

<style>
    /* Paragraf yang LANGSUNG setelah heading h1 */
    h1 + p {
        background-color: #fef9c3;
        padding: 10px;
        border-radius: 5px;
        font-weight: bold;
    }
    
    /* Item list yang LANGSUNG setelah item list lain */
    li + li {
        margin-top: 10px;
        border-top: 1px solid #e2e8f0;
        padding-top: 10px;
    }
    
    /* Tombol yang LANGSUNG setelah tombol lain */
    .btn + .btn {
        margin-left: 10px;
    }
</style>

<h1>Judul Artikel</h1>
<p>Paragraf pertama (LANGSUNG setelah h1) - akan kena styling</p>
<p>Paragraf kedua (TIDAK langsung setelah h1) - tidak kena styling</p>

<ul>
    <li>Item 1</li>
    <li>Item 2 (langsung setelah Item 1) - kena styling</li>
    <li>Item 3 (langsung setelah Item 2) - kena styling</li>
</ul>

Hasilnya:

Judul Artikel

Paragraf pertama (LANGSUNG setelah h1) - akan kena styling

Paragraf kedua (TIDAK langsung setelah h1) - tidak kena styling

Item 1
Item 2 (langsung setelah Item 1) - kena styling
Item 3 (langsung setelah Item 2) - kena styling

Kegunaan Adjacent Sibling Selector:

Memberi jarak khusus pada elemen pertama setelah heading
Menambahkan border atau margin antar item list
Memberi jarak antar tombol yang berurutan
Membuat efek "first paragraph berbeda" di artikel

2. General Sibling Selector (~)

Selektor general sibling memilih semua elemen yang berada setelah elemen lain (tidak harus langsung). Ditandai dengan simbol ~ (tilde).

Sintaks:

/* Memilih SEMUA elemen B yang berada setelah elemen A */
A ~ B {
    properti: nilai;
}

Contoh:

<style>
    /* Semua paragraf yang berada setelah heading h2 */
    h2 ~ p {
        color: #3b82f6;
        margin-left: 20px;
    }
    
    /* Semua span yang berada setelah .note */
    .note ~ span {
        background-color: #eef2ff;
        padding: 2px 6px;
        border-radius: 4px;
    }
    
    /* Semua div dengan class .box yang berada setelah .warning */
    .warning ~ .box {
        border-left: 3px solid #ef4444;
        padding-left: 15px;
    }
</style>

<h2>Sub Judul</h2>
<p>Paragraf A (setelah h2) - kena styling</p>
<div>Div di antara (tidak berpengaruh)</div>
<p>Paragraf B (tetap setelah h2, meskipun ada div) - kena styling</p>

Hasilnya:

Sub Judul

Paragraf A (setelah h2) - kena styling

Div di antara (tidak berpengaruh)

Paragraf B (tetap setelah h2, meskipun ada div) - kena styling

Kegunaan General Sibling Selector:

Memberi gaya pada semua elemen setelah heading tertentu
Membuat efek "semua konten setelah checkbox" (untuk toggle)
Styling semua elemen setelah pesan error/warning

Perbandingan Adjacent (+) vs General (~) Sibling

Mari lihat perbedaan dengan contoh visual:

<div class="container">
    <h2>Judul</h2>
    <p>Paragraf 1</p>
    <div>Div 1</div>
    <p>Paragraf 2</p>
    <div>Div 2</div>
    <p>Paragraf 3</p>
</div>

Selektor Adjacent Sibling (h2 + p): Hanya paragraf LANGSUNG setelah h2

Judul

Paragraf 1 (LANGSUNG) - TERPILIH

Div 1

Paragraf 2 (TIDAK LANGSUNG) - TIDAK TERPILIH

Div 2

Paragraf 3 (TIDAK LANGSUNG) - TIDAK TERPILIH

Selektor General Sibling (h2 ~ p): SEMUA paragraf setelah h2

Judul

Paragraf 1 (setelah h2) - TERPILIH

Div 1

Paragraf 2 (tetap setelah h2) - TERPILIH

Div 2

Paragraf 3 (tetap setelah h2) - TERPILIH

Contoh Praktis: Form dengan Label dan Input

Salah satu penggunaan umum selektor sibling adalah untuk styling form.

<style>
    .form-group {
        margin-bottom: 20px;
    }
    
    /* Label yang LANGSUNG setelah input (untuk checkbox/radio) */
    input[type="checkbox"] + label {
        margin-left: 8px;
        cursor: pointer;
    }
    
    /* Input yang LANGSUNG setelah label */
    label + input,
    label + select,
    label + textarea {
        display: block;
        width: 100%;
        padding: 8px;
        margin-top: 5px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
    }
    
    /* Pesan error yang LANGSUNG setelah input */
    input + .error-message {
        color: #ef4444;
        font-size: 12px;
        margin-top: 5px;
        display: block;
    }
    
    /* Efek focus pada input saat label di-hover (menggunakan general sibling) */
    label:hover ~ input {
        border-color: #3b82f6;
        outline: none;
    }
</style>

<div class="form-group">
    <label>Nama Lengkap:</label>
    <input type="text" placeholder="Masukkan nama lengkap">
    <span class="error-message">Nama harus diisi</span>
</div>

<div class="form-group">
    <input type="checkbox" id="agree">
    <label for="agree">Saya setuju dengan syarat dan ketentuan</label>
</div>

Nama Lengkap: Nama harus diisi

Saya setuju dengan syarat dan ketentuan

Contoh Praktis: Styling Artikel dengan Sibling Selector

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selektor Sibling - Artikel Styling</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        /* ========== ADJACENT SIBLING SELECTOR ========== */
        /* Paragraf pertama setelah heading (drop cap effect) */
        h2 + p::first-letter {
            font-size: 48px;
            font-weight: bold;
            color: #3b82f6;
            float: left;
            margin-right: 8px;
            line-height: 1;
        }
        
        /* Jarak antar heading berurutan */
        h2 + h2 {
            margin-top: 30px;
        }
        
        /* ========== GENERAL SIBLING SELECTOR ========== */
        /* Semua paragraf setelah gambar */
        img ~ p {
            background-color: #f8fafc;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        /* Semua elemen dengan class .note yang berada setelah .warning */
        .warning ~ .note {
            border-left: 3px solid #f59e0b;
            padding-left: 15px;
            margin: 15px 0;
        }
        
        /* ========== STYLING UMUM ========== */
        h1 {
            color: #1e293b;
            margin-bottom: 10px;
        }
        
        .subtitle {
            color: #64748b;
            margin-bottom: 30px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 15px;
        }
        
        h2 {
            color: #334155;
            margin: 20px 0 10px 0;
        }
        
        p {
            line-height: 1.6;
            color: #475569;
            margin-bottom: 15px;
        }
        
        img {
            max-width: 100%;
            border-radius: 12px;
            margin: 15px 0;
        }
        
        .warning {
            background-color: #fef9c3;
            padding: 12px;
            border-radius: 8px;
            border-left: 4px solid #eab308;
            margin: 15px 0;
        }
        
        .note {
            background-color: #eef2ff;
            padding: 12px;
            border-radius: 8px;
            margin: 15px 0;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 30px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        .info-box pre {
            background: #1e1e2e;
            color: #fff;
            padding: 12px;
            border-radius: 8px;
            overflow-x: auto;
            margin: 10px 0;
            font-size: 13px;
        }
        
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #e2e8f0;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Belajar Selektor Sibling</h1>
        <p class="subtitle">Memahami Adjacent (+) dan General (~) Sibling Selector</p>
        
        <h2>Apa Itu Selektor Sibling?</h2>
        <p>Selektor sibling digunakan untuk memilih elemen yang memiliki parent yang sama (selevel). Ada dua jenis: adjacent sibling (+) dan general sibling (~).</p>
        <p>Paragraf ini adalah paragraf kedua setelah heading. Tidak mendapatkan efek drop cap karena hanya paragraf pertama yang terkena.</p>
        
        <h2>Contoh dengan Gambar</h2>
        <p>Di bawah ini ada gambar. Semua paragraf SETELAH gambar akan mendapat styling khusus.</p>
        
        <img src="https://via.placeholder.com/600x300?text=Contoh+Gambar" alt="Contoh gambar" style="width: 100%; height: auto;">
        
        <p>Paragraf ini berada SETELAH gambar. Akan mendapat background abu-abu muda.</p>
        <p>Paragraf ini juga berada SETELAH gambar. Juga mendapat styling yang sama.</p>
        
        <div class="warning">
            ⚠️ Peringatan: Ini adalah pesan peringatan.
        </div>
        
        <div class="note">
            📝 Catatan: Ini adalah catatan biasa.
        </div>
        
        <div class="note">
            📝 Catatan lain: Ini juga catatan, tapi karena setelah warning, mendapat border oranye.
        </div>
        
        <h2>Kesimpulan</h2>
        <p>Selektor sibling sangat berguna untuk styling yang bergantung pada posisi elemen relatif terhadap elemen lain yang selevel.</p>
        
        <div class="info-box">
            <h3>Selektor yang Digunakan di Halaman Ini:</h3>
            <ul>
                <li><code>h2 + p::first-letter</code> → Adjacent sibling: huruf pertama paragraf LANGSUNG setelah h2</li>
                <li><code>h2 + h2</code> → Adjacent sibling: heading h2 yang langsung setelah h2 lain</li>
                <li><code>img ~ p</code> → General sibling: SEMUA paragraf yang berada setelah gambar</li>
                <li><code>.warning ~ .note</code> → General sibling: semua .note yang berada setelah .warning</li>
            </ul>
            <hr>
            <h3>Perbedaan Utama:</h3>
            <ul>
                <li><code>A + B</code> → Memilih B yang LANGSUNG setelah A</li>
                <li><code>A ~ B</code> → Memilih SEMUA B yang berada SETELAH A</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual halaman artikel:

Belajar Selektor Sibling

Memahami Adjacent (+) dan General (~) Sibling Selector

Apa Itu Selektor Sibling?

Selektor sibling digunakan untuk memilih elemen yang memiliki parent yang sama. Paragraf pertama mendapat styling khusus.

Paragraf kedua setelah heading tidak mendapat efek drop cap.

⚠️ Peringatan: Ini adalah pesan peringatan.

📝 Catatan: Catatan setelah warning mendapat border oranye.

Selektor yang Digunakan: h2 + p::first-letter, img ~ p, .warning ~ .note

Tabel Perbandingan Lengkap

Aspek	Adjacent Sibling (+)	General Sibling (~)
Simbol	`+` (plus)	`~` (tilde)
Contoh	`h1 + p`	`h1 ~ p`
Elemen yang dipilih	Hanya elemen LANGSUNG setelah	SEMUA elemen setelah (tidak harus langsung)
Pengaruh elemen di antara	Ada elemen lain di antara = tidak terpilih	Elemen lain di antara tetap terpilih
Kapan pakai?	Styling elemen yang berurutan (tombol, item list, paragraf pertama)	Styling semua elemen setelah elemen tertentu (semua konten setelah heading, semua pesan setelah warning)

Kesalahan Umum Pemula

Tertukar antara + dan ~ → + untuk langsung setelah, ~ untuk semua setelah (tidak harus langsung).
Lupa bahwa elemen harus selevel → Selektor sibling TIDAK BISA memilih elemen di level yang berbeda (tidak bisa memilih anak/cucu).
Mengira bahwa elemen sebelum juga terpilih → Selektor sibling hanya memilih elemen SETELAH, bukan sebelumnya.
Menggunakan selector sibling pada elemen yang tidak berurutan dalam DOM → Perhatikan urutan elemen dalam HTML.

Debugging Tips:

Buka Developer Tools (F12) → inspect elemen yang seharusnya terpilih → lihat apakah selector muncul di panel Styles
Periksa urutan elemen di panel Elements (apakah elemen target benar-benar berada setelah elemen acuan)
Pastikan tidak ada elemen yang memisahkan jika menggunakan adjacent sibling (+)

Latihan Singkat

Buat file HTML dengan struktur: <h2>Judul</h2> <p>Paragraf 1</p> <p>Paragraf 2</p> <p>Paragraf 3</p>
Gunakan adjacent sibling selector untuk styling paragraf pertama setelah h2 (background kuning)
Gunakan general sibling selector untuk styling semua paragraf setelah h2 (warna biru)
Tambah div di antara h2 dan paragraf, lihat perbedaannya
Buat daftar menu dengan list item, gunakan adjacent sibling untuk memberi border antar item
Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

Adjacent Sibling Selector (+) → memilih elemen yang LANGSUNG SETELAH elemen lain (selevel)
General Sibling Selector (~) → memilih SEMUA elemen yang berada SETELAH elemen lain (selevel, tidak harus langsung)
Keduanya hanya bekerja pada elemen yang selevel / memiliki parent yang sama
Hanya memilih elemen yang berada setelah, bukan sebelumnya
Sangat berguna untuk styling form, artikel, navigasi, dan komponen yang bergantung pada posisi relatif

Tantangan: Buat sebuah halaman FAQ (Frequently Asked Questions) dengan efek interaktif menggunakan sibling selector! Persyaratan:

Buat struktur pertanyaan (h3) dan jawaban (p) yang berpasangan
Gunakan adjacent sibling selector untuk styling jawaban yang LANGSUNG setelah pertanyaan (background abu-abu, padding)
Gunakan general sibling selector untuk styling SEMUA jawaban setelah pertanyaan tertentu (misal: semua jawaban setelah pertanyaan pertama)
Buat efek hover pada pertanyaan yang mengubah warna jawaban menggunakan sibling selector
Buat daftar link terkait di bagian bawah, gunakan adjacent sibling untuk memberi jarak antar link (margin-left hanya pada link setelah link pertama)
Tambahkan kotak penjelasan yang menunjukkan mana yang menggunakan adjacent sibling (+) dan mana yang menggunakan general sibling (~)

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #5 - Selektor Turunan dan Anak (Descendant & Child Selector)
Artikel Selanjutnya: CSS Dasar #7 - Pseudo-class (hover, focus, active, visited, first-child, last-child, nth-child)

CSS Dasar #6 - Selektor Sibling (Adjacent & General Sibling Selector)

Apa Itu Selektor Sibling?

1. Adjacent Sibling Selector (+)

Sintaks:

Contoh:

Judul Artikel

2. General Sibling Selector (~)

Sintaks:

Contoh:

Sub Judul

Perbandingan Adjacent (+) vs General (~) Sibling

Judul

Judul

Contoh Praktis: Form dengan Label dan Input

Contoh Praktis: Styling Artikel dengan Sibling Selector

Belajar Selektor Sibling

Apa Itu Selektor Sibling?

Tabel Perbandingan Lengkap

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

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

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