CSS Dasar #5 - Selektor Turunan dan Anak (Descendant & Child Selector)

byFerdian Rahabista -
0

Setelah kita menguasai selektor dasar (tag, class, ID), sekarang saatnya belajar selektor yang lebih spesifik: selektor turunan (descendant selector) dan selektor anak (child selector). Kedua selektor ini memungkinkan kita memilih elemen berdasarkan posisinya dalam struktur HTML (hierarki).

Mengapa Perlu Selektor Turunan dan Anak?

Bayangkan Anda memiliki struktur HTML seperti ini:

<div class="container">
    <p>Paragraf langsung di dalam container</p>
    <div class="box">
        <p>Paragraf di dalam box (lebih dalam)</p>
    </div>
</div>

Jika Anda hanya menggunakan selektor p { }, semua paragraf akan terkena styling. Tapi bagaimana jika Anda ingin hanya paragraf di dalam container tertentu saja yang diberi gaya? Di sinilah selektor turunan dan anak berperan.

Perbedaan Utama:
- Selektor Turunan (Descendant Selector) → Memilih semua elemen di dalam elemen lain, tanpa batasan level (bisa anak, cucu, cicit, dll)
- Selektor Anak (Child Selector) → Memilih hanya elemen langsung (level 1) di dalam elemen lain

1. Selektor Turunan (Descendant Selector)

Selektor turunan digunakan untuk memilih elemen yang berada di dalam elemen lain, pada level mana pun (bisa anak langsung, cucu, atau lebih dalam).

Ciri khas: menggunakan spasi antara selektor.

/* Sintaks: selektor_ induk spasi selektor_ turunan */
.parent .child {
    properti: nilai;
}

/* Contoh: semua paragraf di dalam div dengan class "content" */
.content p {
    color: blue;
}

Contoh Selektor Turunan:

<style>
    /* Semua paragraf di dalam div dengan class "article" */
    .article p {
        color: #3b82f6;
        font-weight: bold;
    }
    
    /* Semua span di dalam div dengan class "note" */
    .note span {
        background-color: #fef9c3;
        padding: 2px 4px;
    }
    
    /* Semua link di dalam footer */
    footer a {
        color: #94a3b8;
        text-decoration: none;
    }
    
    footer a:hover {
        color: white;
    }
</style>

<div class="article">
    <p>Paragraf ini akan berwarna biru (di dalam .article)</p>
    <div>
        <p>Paragraf ini JUGAKAN berwarna biru (meskipun di dalam div tambahan)</p>
    </div>
</div>

<div class="note">
    <p>Ini adalah <span>catatan penting</span> yang perlu diperhatikan.</p>
</div>

Hasilnya:

Paragraf ini akan berwarna biru (di dalam .article)

Paragraf ini JUGAKAN berwarna biru (meskipun di dalam div tambahan)

Ini adalah catatan penting yang perlu diperhatikan.

Link di footer
Poin Penting Selektor Turunan:
- Menggunakan spasi sebagai pemisah
- Memilih elemen di LEVEL MANA PUN (bisa anak, cucu, cicit)
- Sangat berguna untuk styling yang bergantung pada konteks

2. Selektor Anak (Child Selector)

Selektor anak digunakan untuk memilih elemen yang langsung berada di dalam elemen lain (hanya level 1, bukan lebih dalam).

Ciri khas: menggunakan simbol > (lebih besar dari) antara selektor.

/* Sintaks: selektor_induk > selektor_anak */
.parent > .child {
    properti: nilai;
}

/* Contoh: hanya paragraf langsung di dalam div dengan class "content" */
.content > p {
    color: green;
}

Contoh Selektor Anak:

<style>
    /* Hanya paragraf LANGSUNG di dalam .sidebar */
    .sidebar > p {
        background-color: #eef2ff;
        padding: 10px;
        border-radius: 5px;
    }
    
    /* Hanya item list LANGSUNG di dalam nav */
    nav > ul > li {
        display: inline-block;
        margin-right: 20px;
    }
    
    /* Hanya span LANGSUNG di dalam .alert */
    .alert > span {
        font-weight: bold;
        color: #ef4444;
    }
</style>

<div class="sidebar">
    <p>Paragraf LANGSUNG di dalam sidebar (akan kena styling)</p>
    <div>
        <p>Paragraf di dalam div (TIDAK kena styling, karena tidak langsung)</p>
    </div>
</div>

Hasilnya:

Paragraf LANGSUNG di dalam sidebar (akan kena styling)

Paragraf di dalam div (TIDAK kena styling, karena tidak langsung)

Peringatan! Ini adalah pesan alert.
Poin Penting Selektor Anak:
- Menggunakan simbol > sebagai pemisah
- Hanya memilih elemen LANGSUNG (level 1), tidak termasuk cucu
- Lebih spesifik dan terbatas daripada selektor turunan

Perbandingan Selektor Turunan vs Selektor Anak

Mari lihat perbedaan dengan contoh visual:

<div class="container">
    <p>Paragraf A (langsung di dalam container)</p>
    <div>
        <p>Paragraf B (di dalam div, cucu dari container)</p>
        <div>
            <p>Paragraf C (di dalam div lagi, cicit dari container)</p>
        </div>
    </div>
</div>

Selektor Turunan (.container p): Memilih SEMUA paragraf (A, B, dan C)

Paragraf A (langsung) - TERPILIH

Paragraf B (cucu) - TERPILIH

Paragraf C (cicit) - TERPILIH

Selektor Anak (.container > p): Hanya paragraf LANGSUNG (hanya A)

Paragraf A (langsung) - TERPILIH

Paragraf B (cucu) - TIDAK TERPILIH

Paragraf C (cicit) - TIDAK TERPILIH

Kombinasi Selektor Turunan dan Anak

Kita bisa menggabungkan kedua selektor untuk hasil yang lebih spesifik.

Contoh Kombinasi:

<style>
    /* Semua paragraf di dalam .main-content, TAPI hanya yang di dalam .article */
    .main-content .article p {
        line-height: 1.8;
    }
    
    /* Hanya paragraf LANGSUNG di dalam .card, TAPI card harus di dalam .gallery */
    .gallery > .card > p {
        font-weight: bold;
    }
    
    /* Kombinasi: semua span di dalam .footer, TAPI footer harus langsung di dalam body */
    body > footer span {
        color: #94a3b8;
    }
</style>

Contoh Praktis: Layout Blog dengan Selektor Turunan dan Anak

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selektor Turunan dan Anak - Blog Layout</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* ========== HEADER STYLING ========== */
        /* Selektor turunan: semua link di dalam header */
        header a {
            text-decoration: none;
            color: #3b82f6;
            font-weight: 500;
        }
        
        /* Selektor anak: hanya judul LANGSUNG di dalam header */
        header > h1 {
            font-size: 28px;
            color: #1e293b;
        }
        
        /* ========== NAVIGASI STYLING ========== */
        /* Selektor anak: hanya list item LANGSUNG di dalam nav */
        nav > ul > li {
            display: inline-block;
            margin-right: 25px;
        }
        
        /* Selektor turunan: semua link di dalam nav */
        nav a {
            color: #64748b;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        nav a:hover {
            color: #3b82f6;
        }
        
        /* ========== MAIN CONTENT STYLING ========== */
        /* Selektor turunan: semua paragraf di dalam .main-content */
        .main-content p {
            margin-bottom: 15px;
            color: #334155;
        }
        
        /* Selektor anak: hanya heading LANGSUNG di dalam .main-content */
        .main-content > h2 {
            color: #1e293b;
            border-left: 4px solid #3b82f6;
            padding-left: 15px;
            margin: 25px 0 15px 0;
        }
        
        /* ========== CARD STYLING ========== */
        /* Selektor turunan: semua heading di dalam .card */
        .card h3 {
            color: #3b82f6;
            margin-bottom: 10px;
        }
        
        /* Selektor anak: hanya tombol LANGSUNG di dalam .card */
        .card > .btn {
            display: inline-block;
            background-color: #3b82f6;
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .card > .btn:hover {
            background-color: #2563eb;
        }
        
        /* ========== SIDEBAR STYLING ========== */
        /* Selektor turunan: semua list item di dalam .sidebar */
        .sidebar li {
            margin-bottom: 10px;
            list-style: none;
        }
        
        /* Selektor turunan: semua link di dalam .sidebar */
        .sidebar a {
            color: #64748b;
            text-decoration: none;
        }
        
        .sidebar a:hover {
            color: #3b82f6;
        }
        
        /* ========== FOOTER STYLING ========== */
        /* Selektor turunan: semua paragraf di dalam footer */
        footer p {
            font-size: 14px;
            color: #94a3b8;
        }
        
        /* Selektor anak: hanya paragraf LANGSUNG di dalam footer */
        footer > p {
            margin-top: 10px;
        }
        
        /* ========== LAYOUT GRID ========== */
        .content-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin: 30px 0;
        }
        
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .sidebar {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .sidebar h3 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        footer {
            background: #1e293b;
            padding: 30px;
            text-align: center;
            margin-top: 30px;
            border-radius: 12px;
        }
        
        .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;
        }
        
        @media (max-width: 768px) {
            .content-wrapper {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <header>
            <h1>Blog Saya</h1>
            <p>Selamat datang di blog pribadi saya <a href="#">baca tentang saya</a></p>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Beranda</a></li>
                <li><a href="#">Artikel</a></li>
                <li><a href="#">Tentang</a></li>
                <li><a href="#">Kontak</a></li>
            </ul>
        </nav>
        
        <div class="content-wrapper">
            <main class="main-content">
                <h2>Artikel Terbaru</h2>
                
                <div class="card">
                    <h3>Belajar Selektor CSS</h3>
                    <p>Selektor turunan dan anak sangat membantu untuk styling yang lebih spesifik. Dengan memahami keduanya, kita bisa menulis CSS yang lebih efisien.</p>
                    <a href="#" class="btn">Baca Selengkapnya</a>
                </div>
                
                <div class="card">
                    <h3>Tips Layout dengan Flexbox</h3>
                    <p>Flexbox adalah alat yang powerful untuk membuat layout modern. Pelajari properti dasar flexbox untuk memulai.</p>
                    <a href="#" class="btn">Baca Selengkapnya</a>
                </div>
                
                <h2>Tutorial Populer</h2>
                
                <div class="card">
                    <h3>CSS Grid untuk Pemula</h3>
                    <p>CSS Grid memungkinkan kita membuat layout 2 dimensi dengan mudah. Cocok untuk layout halaman yang kompleks.</p>
                    <a href="#" class="btn">Baca Selengkapnya</a>
                </div>
            </main>
            
            <aside class="sidebar">
                <h3>Kategori</h3>
                <ul>
                    <li><a href="#">HTML (5)</a></li>
                    <li><a href="#">CSS (8)</a></li>
                    <li><a href="#">JavaScript (3)</a></li>
                </ul>
                
                <hr>
                
                <h3>Tentang Penulis</h3>
                <p>Seorang web developer yang suka berbagi ilmu seputar dunia programming.</p>
            </aside>
        </div>
        
        <footer>
            <p>© 2024 Blog Saya - Semua hak dilindungi</p>
            <p>Dibuat dengan CSS <span>❤️</span></p>
        </footer>
        
        <div class="info-box">
            <h3>Selektor yang Digunakan di Halaman Ini:</h3>
            <ul>
                <li><code>header a</code> → Selektor turunan: semua link di dalam header</li>
                <li><code>header > h1</code> → Selektor anak: hanya heading langsung di dalam header</li>
                <li><code>nav > ul > li</code> → Selektor anak: list item langsung di dalam nav</li>
                <li><code>nav a</code> → Selektor turunan: semua link di dalam nav</li>
                <li><code>.main-content p</code> → Selektor turunan: semua paragraf di dalam .main-content</li>
                <li><code>.main-content > h2</code> → Selektor anak: hanya heading langsung di dalam .main-content</li>
                <li><code>.card h3</code> → Selektor turunan: semua heading di dalam .card</li>
                <li><code>.card > .btn</code> → Selektor anak: hanya tombol langsung di dalam .card</li>
                <li><code>footer p</code> → Selektor turunan: semua paragraf di dalam footer</li>
                <li><code>footer > p</code> → Selektor anak: hanya paragraf langsung di dalam footer</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual halaman blog:

Blog Saya

Selamat datang di blog pribadi saya baca tentang saya

Artikel Terbaru

Belajar Selektor CSS

Selektor turunan dan anak sangat membantu untuk styling yang lebih spesifik.

Kategori

HTML (5)

CSS (8)

JavaScript (3)

Selektor yang Digunakan: header a, header > h1, nav > ul > li, nav a, .main-content p, .main-content > h2, .card h3, .card > .btn, footer p, footer > p

Tabel Perbandingan Lengkap

Aspek Selektor Turunan Selektor Anak
Simbol Spasi ( ) >
Contoh .parent .child .parent > .child
Level yang dipilih Semua level (anak, cucu, cicit, dll) Hanya level 1 (langsung)
Spesifisitas Sedang Lebih spesifik
Kapan pakai? Styling semua elemen di dalam konteks tertentu Styling hanya elemen langsung

Kesalahan Umum Pemula

  • Tertukar antara spasi dan > → Spasi untuk turunan (semua level), > untuk anak (level 1).
  • Lupa spasi pada selektor turunan → .parent.child (salah, ini berarti elemen dengan dua class) vs .parent .child (benar).
  • Mengira selektor anak bisa untuk level lebih dalam → .parent > div > p tetap bisa, tapi setiap > menunjukkan satu level.
  • Terlalu panjang dalam menulis selektor → Hindari selektor yang terlalu spesifik seperti body > div > main > article > p (sulit di-maintenance).
  • Lupa bahwa selektor turunan bisa memilih terlalu banyak → Jika tidak hati-hati, bisa memilih elemen yang tidak diinginkan.
Debugging Tips:
  • Buka Developer Tools (F12) → inspect elemen → lihat selector yang aktif di panel Styles
  • Jika selector tidak muncul, periksa apakah struktur HTML sesuai dengan selektor yang ditulis
  • Gunakan breadcrumb di panel Elements untuk melihat posisi elemen dalam hierarki HTML

Latihan Singkat

  1. Buat file HTML dengan struktur berikut: <div class="wrapper"> <div class="content"> <p>Teks</p> </div> </div>
  2. Gunakan selektor turunan untuk memilih paragraf di dalam .wrapper (warna biru)
  3. Gunakan selektor anak untuk memilih paragraf langsung di dalam .content (background kuning)
  4. Tambah div lain di dalam .content, lalu paragraf di dalamnya. Amati perbedaan selektor turunan dan anak
  5. Buat menu navigasi dengan ul > li > a, lalu styling dengan selektor anak
  6. Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

  • Selektor Turunan (spasi) → memilih SEMUA elemen di dalam elemen lain (semua level)
  • Selektor Anak (>) → memilih hanya elemen LANGSUNG di dalam elemen lain (level 1)
  • Gunakan selektor turunan untuk styling kontekstual (semua elemen di dalam area tertentu)
  • Gunakan selektor anak untuk styling yang lebih spesifik dan terbatas
  • Kombinasikan kedua selektor untuk hasil yang lebih presisi
  • Hindari selektor yang terlalu panjang dan spesifik (sulit di-maintenance)
Tantangan: Buat sebuah halaman Komentar Blog dengan struktur bertingkat! Persyaratan:
  • Buat struktur komentar dengan balasan (reply) di dalamnya (minimal 2 level)
  • Gunakan selektor turunan untuk styling semua teks komentar (font, warna)
  • Gunakan selektor anak untuk styling hanya komentar level 1 (background berbeda)
  • Gunakan selektor anak untuk styling hanya tombol balas di komentar level 1
  • Gunakan kombinasi selektor untuk styling link di dalam komentar level 2
  • Tambahkan kotak penjelasan yang menunjukkan mana yang menggunakan selektor turunan dan mana yang menggunakan selektor anak

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #4 - Selektor Dasar: Tag, Class, dan ID (Review + Contoh Praktis)
Artikel Selanjutnya: CSS Dasar #6 - Selektor Sibling (Adjacent & General Sibling Selector)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

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