CSS Selectors: Cara Memilih Element HTML dengan Tepat

Halo kawan Maya! Pernah nggak sih kepikiran gimana caranya CSS bisa “tahu” element HTML mana yang harus diberi style? Nah, jawabannya ada di yang namanya CSS Selectors.

Bayangkan kawan Maya punya sebuah kelas dengan 30 murid. Ketika guru ingin memanggil seseorang, dia bisa manggil berdasarkan nama, nomor absen, atau mungkin kategori tertentu seperti “semua yang pakai kacamata”. Begitu juga dengan CSS Selectors – ini adalah cara kita “memanggil” atau memilih element HTML yang ingin kita beri style.

Apa Itu CSS Selectors?

CSS Selectors adalah pola atau pattern yang kita gunakan untuk memilih element HTML yang ingin kita style. Dengan selector, kita bisa menentukan dengan presisi element mana saja yang akan mendapatkan tampilan tertentu.

Struktur dasar CSS rule selalu seperti ini:

selector {
    property: value;
}

Bagian selector di awal itulah yang akan kita pelajari hari ini. Mari kita eksplorasi berbagai jenis selector yang bisa kawan Maya gunakan!

1. Universal Selector (*)

Selector paling sederhana adalah universal selector yang ditandai dengan tanda bintang (*). Selector ini akan memilih semua element di halaman web kawan Maya.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Contoh di atas akan menghapus margin dan padding default dari semua element. Ini sering digunakan oleh developer untuk mereset style default browser.

Kapan menggunakan universal selector?

Saat ingin mereset style default
Saat ingin menerapkan style yang berlaku untuk semua element

Peringatan: Gunakan dengan bijak karena universal selector akan memproses semua element dan bisa mempengaruhi performa jika digunakan berlebihan.

2. Type Selector (Element Selector)

Type selector memilih element berdasarkan nama tag HTML-nya. Ini adalah selector yang paling dasar dan mudah dipahami.

h1 {
    color: #2c3e50;
    font-size: 2.5em;
}

p {
    line-height: 1.6;
    color: #555;
}

a {
    text-decoration: none;
    color: #3498db;
}

Dengan code di atas:

Semua <h1> akan berwarna gelap dan berukuran 2.5em
Semua <p> akan memiliki jarak baris 1.6 dan warna abu-abu
Semua <a> tidak akan memiliki underline dan berwarna biru

Contoh Praktis:

<h1>Selamat Datang di Blog Saya</h1>
<p>Ini adalah paragraf pertama yang membahas tentang CSS.</p>
<p>Paragraf kedua juga akan mendapat style yang sama.</p>
<a href="#">Klik di sini</a>

Semua element dengan tag yang sama akan mendapat style yang identik.

3. Class Selector (.)

Ini dia salah satu selector yang paling sering digunakan! Class selector memilih element berdasarkan nilai attribute class. Ditandai dengan titik (.) di depan nama class.

.tombol {
    background-color: #e74c3c;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    border: none;
}

.kotak-info {
    background-color: #ecf0f1;
    padding: 20px;
    border-left: 4px solid #3498db;
}

.teks-besar {
    font-size: 1.8em;
    font-weight: bold;
}

Contoh HTML:

<button class="tombol">Kirim Pesan</button>
<button class="tombol">Download</button>

<div class="kotak-info">
    <p>Ini adalah informasi penting untuk dibaca.</p>
</div>

<p class="teks-besar">Judul Artikel</p>

Keuntungan class selector:

Bisa digunakan berkali-kali di halaman yang sama
Satu element bisa punya banyak class
Sangat fleksibel untuk reusable components

Multiple Classes:

<div class="kotak-info teks-besar">
    Kotak ini punya dua class sekaligus!
</div>

4. ID Selector (#)

ID selector memilih element berdasarkan attribute id. Ditandai dengan tanda pagar (#) di depan nama id.

#header-utama {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 0;
    text-align: center;
}

#menu-navigasi {
    position: sticky;
    top: 0;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#footer {
    background-color: #2c3e50;
    color: white;
    padding: 40px 0;
}

Contoh HTML:

<header id="header-utama">
    <h1>Website Keren</h1>
</header>

<nav id="menu-navigasi">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

<footer id="footer">
    <p>Copyright 2025</p>
</footer>

Perbedaan ID vs Class:

ID harus unik (satu halaman = satu ID)
Class bisa dipakai berkali-kali
ID lebih spesifik (prioritas lebih tinggi)
Gunakan ID untuk element yang cuma ada satu (header, footer, menu utama)
Gunakan class untuk component yang bisa berulang

5. Descendant Selector (Spasi)

Descendant selector memilih element yang berada di dalam element lain. Menggunakan spasi untuk memisahkan selector.

.artikel p {
    margin-bottom: 15px;
    text-align: justify;
}

.sidebar a {
    display: block;
    padding: 10px;
    color: #2c3e50;
}

#menu-utama li {
    display: inline-block;
    margin-right: 20px;
}

Contoh HTML:

<div class="artikel">
    <h2>Judul Artikel</h2>
    <p>Paragraf ini akan terkena style.</p>
    <p>Ini juga akan terkena style.</p>
</div>

<div class="sidebar">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
</div>

Style hanya berlaku untuk element yang berada di dalam element parent yang ditentukan.

6. Child Selector (>)

Child selector lebih spesifik dari descendant selector. Hanya memilih element yang merupakan anak langsung dari parent.

.menu > li {
    font-weight: bold;
}

.container > p {
    color: #e74c3c;
}

Perbedaan dengan Descendant Selector:

<ul class="menu">
    <li>Item 1 (akan terkena style)</li>
    <li>Item 2 (akan terkena style)
        <ul>
            <li>Sub Item (TIDAK terkena style)</li>
        </ul>
    </li>
</ul>

Child selector hanya memilih satu level ke bawah, sedangkan descendant selector memilih semua level.

7. Adjacent Sibling Selector (+)

Selector ini memilih element yang langsung setelah element lain pada level yang sama.

h2 + p {
    font-size: 1.2em;
    color: #555;
    margin-top: 0;
}

.kotak-biru + .kotak-merah {
    margin-left: 20px;
}

Contoh:

<h2>Judul</h2>
<p>Paragraf ini langsung setelah h2, jadi terkena style.</p>
<p>Paragraf ini tidak terkena style.</p>

8. General Sibling Selector (~)

Mirip dengan adjacent sibling, tapi memilih semua sibling element yang muncul setelah element pertama.

h2 ~ p {
    color: #7f8c8d;
}

Contoh:

<h2>Judul</h2>
<p>Terkena style</p>
<div>Ini div</div>
<p>Ini juga terkena style</p>
<p>Dan ini juga!</p>

9. Attribute Selector

Selector ini memilih element berdasarkan attribute atau nilai attribute-nya.

Berbagai Variasi:

/* Element dengan attribute tertentu */
a[target] {
    background-color: yellow;
}

/* Attribute dengan nilai spesifik */
input[type="text"] {
    border: 2px solid #3498db;
    padding: 10px;
}

input[type="password"] {
    border: 2px solid #e74c3c;
}

/* Attribute yang mengandung kata tertentu */
a[href*="youtube"] {
    color: #ff0000;
}

/* Attribute yang dimulai dengan... */
a[href^="https"] {
    padding-left: 20px;
}

/* Attribute yang diakhiri dengan... */
a[href$=".pdf"] {
    background-image: url('pdf-icon.png');
}

Contoh HTML:

<a href="https://example.com" target="_blank">Link External</a>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<a href="https://youtube.com/watch?v=123">Video Tutorial</a>
<a href="document.pdf">Download PDF</a>

10. Pseudo-class Selector

Pseudo-class memilih element dalam state atau kondisi tertentu. Ditandai dengan titik dua (:).

State Interaksi:

a:hover {
    color: #e74c3c;
    text-decoration: underline;
}

button:active {
    transform: scale(0.95);
}

input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

input:disabled {
    background-color: #ecf0f1;
    cursor: not-allowed;
}

Structural Pseudo-classes:

/* Element pertama */
li:first-child {
    font-weight: bold;
}

/* Element terakhir */
li:last-child {
    border-bottom: none;
}

/* Element ganjil (1, 3, 5, ...) */
tr:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Element genap (2, 4, 6, ...) */
tr:nth-child(even) {
    background-color: #ffffff;
}

/* Element ke-n spesifik */
li:nth-child(3) {
    color: red;
}

Contoh HTML:

<ul>
    <li>Item 1 (bold)</li>
    <li>Item 2</li>
    <li>Item 3 (merah)</li>
    <li>Item 4</li>
    <li>Item 5 (tanpa border-bottom)</li>
</ul>

11. Pseudo-element Selector

Pseudo-element memilih bagian spesifik dari element. Ditandai dengan dua titik dua (::).

p::first-line {
    font-weight: bold;
    font-size: 1.1em;
}

p::first-letter {
    font-size: 3em;
    float: left;
    line-height: 0.8;
    margin-right: 5px;
}

.kutipan::before {
    content: '"';
    font-size: 3em;
    color: #3498db;
}

.kutipan::after {
    content: '"';
    font-size: 3em;
    color: #3498db;
}

::selection {
    background-color: #3498db;
    color: white;
}

12. Grouping Selector (Koma)

Ketika kawan Maya ingin menerapkan style yang sama ke beberapa element, gunakan koma untuk menggabungkannya.

h1, h2, h3, h4 {
    font-family: 'Arial', sans-serif;
    color: #2c3e50;
}

.tombol-merah, .tombol-biru, .tombol-hijau {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

header, footer, aside {
    padding: 20px;
}

Ini sangat efisien dan membuat code lebih clean!

Specificity: Siapa yang Menang?

Ketika beberapa selector menarget element yang sama, CSS menggunakan sistem specificity untuk menentukan style mana yang dipakai.

Urutan Prioritas (dari tertinggi ke terendah):

Inline style – <div style="color: red;">
ID selector – #header
Class, attribute, pseudo-class – .tombol, [type="text"], :hover
Element selector – div, p, h1
Universal selector – *

Contoh Konflik:

/* Specificity: 1 (element) */
p {
    color: blue;
}

/* Specificity: 10 (class) */
.teks-merah {
    color: red;
}

/* Specificity: 100 (id) */
#paragraf-khusus {
    color: green;
}

<p>Biru</p>
<p class="teks-merah">Merah (class menang dari element)</p>
<p id="paragraf-khusus" class="teks-merah">Hijau (id menang dari class)</p>

Tips: Jika kawan Maya butuh override paksa, bisa pakai !important, tapi hindari kalau bisa karena bisa bikin code susah di-maintain.

p {
    color: red !important;
}

Combining Selectors: Kekuatan Penuh

Kawan Maya bisa menggabungkan berbagai selector untuk targeting yang sangat spesifik!

/* Class dengan pseudo-class */
.tombol:hover {
    background-color: #2980b9;
}

/* Multiple class */
.kotak.aktif {
    border: 2px solid green;
}

/* Descendant + pseudo-class */
.menu li:hover {
    background-color: #ecf0f1;
}

/* Child + attribute */
.form > input[type="email"] {
    border-color: #3498db;
}

/* Complex combination */
#sidebar .widget ul li:first-child a:hover {
    color: #e74c3c;
}

Best Practices: Tips dari Maya

Setelah memahami berbagai selector, berikut tips untuk menggunakannya dengan efektif:

Gunakan class selector sebagai default – Paling fleksibel dan reusable
Hindari selector yang terlalu spesifik – Akan susah di-override nanti
Jangan over-use ID – Lebih baik pakai class kecuali memang unique
Manfaatkan descendant selector – Untuk scoping style ke area tertentu
Beri nama yang descriptive – .tombol-submit lebih baik dari .btn-1
Konsisten dengan naming convention – Pilih satu style (camelCase, kebab-case, dll)
Hindari universal selector di production – Bisa mempengaruhi performance

Contoh Project Sederhana

Mari kita lihat contoh lengkap menggunakan berbagai selector:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Contoh CSS Selectors</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            line-height: 1.6;
        }

        #header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 0;
            text-align: center;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .artikel {
            background-color: white;
            padding: 30px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .artikel h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }

        .artikel p {
            color: #555;
            margin-bottom: 10px;
        }

        .artikel p:first-child {
            font-weight: bold;
            color: #3498db;
        }

        .tombol {
            display: inline-block;
            padding: 12px 24px;
            background-color: #3498db;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        .tombol:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        ul li {
            margin-left: 20px;
            margin-bottom: 8px;
        }

        ul li:nth-child(odd) {
            color: #e74c3c;
        }

        input[type="text"],
        input[type="email"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #ddd;
            border-radius: 4px;
        }

        input[type="text"]:focus,
        input[type="email"]:focus {
            border-color: #3498db;
            outline: none;
        }

        #footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <header id="header">
        <h1>Belajar CSS Selectors</h1>
    </header>

    <div class="container">
        <article class="artikel">
            <h2>Artikel Pertama</h2>
            <p>Ini paragraf pertama yang akan bold dan berwarna biru.</p>
            <p>Ini paragraf kedua dengan style normal.</p>
            <a href="#" class="tombol">Baca Selengkapnya</a>
        </article>

        <article class="artikel">
            <h2>Daftar Poin Penting</h2>
            <ul>
                <li>Poin pertama (merah)</li>
                <li>Poin kedua (normal)</li>
                <li>Poin ketiga (merah)</li>
                <li>Poin keempat (normal)</li>
            </ul>
        </article>

        <article class="artikel">
            <h2>Form Contoh</h2>
            <input type="text" placeholder="Nama Anda">
            <input type="email" placeholder="Email Anda">
            <a href="#" class="tombol">Kirim</a>
        </article>
    </div>

    <footer id="footer">
        <p>&copy; 2025 Tutorial CSS by Maya</p>
    </footer>
</body>
</html>

Kesimpulan

CSS Selectors adalah fondasi penting dalam styling web. Dengan memahami berbagai jenis selector – dari yang sederhana seperti type selector hingga yang kompleks seperti combining selectors – kawan Maya bisa mengontrol tampilan website dengan presisi tinggi.

Kunci utamanya adalah:

Pahami kapan menggunakan selector yang tepat
Jangan terlalu kompleks kalau bisa simple
Prioritaskan class selector untuk fleksibilitas
Manfaatkan pseudo-class dan pseudo-element untuk interaksi
Perhatikan specificity untuk menghindari konflik

Selamat bereksperimen dengan CSS Selectors! Semakin sering kawan Maya praktik, semakin intuitif kawan Maya akan memilih selector yang tepat untuk setiap situasi.

Ditulis oleh: Maya

Maya adalah tokoh hayalan, hanya tampaknya ada, tetapi nyatanya tidak ada, tokoh Maya dibangun untuk lebih mendekatkan karyamaya pada kalian.

Semua tulisan Maya | Website

CSS Selectors: Cara Memilih Element HTML dengan Tepat

Apa Itu CSS Selectors?

1. Universal Selector (*)

2. Type Selector (Element Selector)

3. Class Selector (.)

4. ID Selector (#)

5. Descendant Selector (Spasi)

6. Child Selector (>)

7. Adjacent Sibling Selector (+)

8. General Sibling Selector (~)

9. Attribute Selector

10. Pseudo-class Selector

11. Pseudo-element Selector

12. Grouping Selector (Koma)

Specificity: Siapa yang Menang?

Combining Selectors: Kekuatan Penuh

Best Practices: Tips dari Maya

Contoh Project Sederhana

Kesimpulan

ads by Google

Contents

About Maya