CSS Dasar #9 - Selektor Atribut (Attribute Selector)

byFerdian Rahabista -
0

Setelah kita mempelajari berbagai jenis selektor (tag, class, ID, pseudo-class, pseudo-element), sekarang saatnya mengenal selektor atribut. Selektor atribut memungkinkan kita memilih elemen berdasarkan atribut HTML dan nilainya. Ini sangat berguna untuk styling form, link, dan elemen dengan atribut khusus.

Apa Itu Selektor Atribut?

Selektor atribut adalah selektor yang memilih elemen berdasarkan keberadaan atribut atau nilai atribut tertentu. Selektor ini ditulis dengan tanda kurung siku [].

Sintaks Selektor Atribut: 
/* Memilih elemen dengan atribut tertentu */
[atribut] {
    properti: nilai;
}

/* Memilih elemen dengan atribut dan nilai tertentu */
[atribut="nilai"] {
    properti: nilai;
}

/* Contoh: memilih semua input dengan type="text" */
input[type="text"] {
    border: 1px solid blue;
}

Jenis-jenis Selektor Atribut

Selektor Simbol Contoh Penjelasan
Ada atribut [attr] [disabled] Memilih elemen yang memiliki atribut disabled
Sama persis [attr="value"] input[type="text"] Nilai atribut sama persis
Dimulai dengan [attr^="value"] a[href^="https"] Nilai atribut dimulai dengan value
Diakhiri dengan [attr$="value"] a[href$=".pdf"] Nilai atribut diakhiri dengan value
Mengandung [attr*="value"] a[href*="google"] Nilai atribut mengandung value
Dipisah spasi [attr~="value"] [class~="btn"] Nilai atribut berisi value sebagai kata terpisah spasi
Dipisah strip [attr|="value"] [lang|="en"] Nilai atribut dimulai dengan value lalu diikuti strip (-)

1. Selektor [attr] (Ada Atribut)

Memilih elemen yang memiliki atribut tertentu, berapa pun nilainya.

Contoh:

<style>
    /* Semua elemen yang memiliki atribut disabled */
    [disabled] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Semua elemen yang memiliki atribut required */
    [required] {
        border-color: #3b82f6;
        border-width: 2px;
    }
    
    /* Semua elemen yang memiliki atribut placeholder */
    [placeholder] {
        font-style: italic;
    }
</style>

<input type="text" placeholder="Nama">
<input type="email" required>
<button disabled>Submit</button>

Hasilnya:



2. Selektor [attr="value"] (Sama Persis)

Memilih elemen yang nilai atributnya sama persis dengan value yang ditentukan.

Contoh:

<style>
    /* Input dengan type="text" */
    input[type="text"] {
        border: 2px solid #3b82f6;
        border-radius: 8px;
        padding: 8px;
    }
    
    /* Input dengan type="email" */
    input[type="email"] {
        border: 2px solid #22c55e;
        border-radius: 8px;
        padding: 8px;
    }
    
    /* Input dengan type="password" */
    input[type="password"] {
        border: 2px solid #ef4444;
        border-radius: 8px;
        padding: 8px;
    }
    
    /* Tombol dengan type="submit" */
    button[type="submit"] {
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 6px;
    }
</style>

<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="password" placeholder="Password input">
<button type="submit">Kirim</button>

Hasilnya:

3. Selektor [attr^="value"] (Dimulai Dengan)

Memilih elemen yang nilai atributnya dimulai dengan value tertentu. Simbol ^ artinya "dimulai dengan" (caret).

Contoh:

<style>
    /* Link eksternal (dimulai dengan https) */
    a[href^="https"] {
        color: #22c55e;
    }
    
    /* Link yang menuju ke file gambar */
    a[href$=".jpg"], a[href$=".png"] {
        background-color: #fef9c3;
        padding: 2px 4px;
        border-radius: 4px;
    }
    
    /* Link yang dimulai dengan # (anchor link) */
    a[href^="#"] {
        color: #8b5cf6;
        text-decoration: none;
        border-bottom: 1px dotted #8b5cf6;
    }
</style>

<a href="https://google.com">Google (HTTPS)</a><br>
<a href="http://example.com">Example (HTTP)</a><br>
<a href="image.jpg">File JPG</a><br>
<a href="#section1">Anchor Link</a>

Hasilnya:

Google (HTTPS)
Example (HTTP)
File JPG
Anchor Link

4. Selektor [attr$="value"] (Diakhiri Dengan)

Memilih elemen yang nilai atributnya diakhiri dengan value tertentu. Simbol $ artinya "diakhiri dengan".

Contoh:

<style>
    /* Link yang menuju ke file PDF */
    a[href$=".pdf"]::before {
        content: "📄 ";
    }
    
    /* Link yang menuju ke file DOC */
    a[href$=".doc"], a[href$=".docx"]::before {
        content: "📝 ";
    }
    
    /* Gambar dengan ekstensi PNG */
    img[src$=".png"] {
        border: 2px solid #3b82f6;
        padding: 5px;
    }
</style>

<a href="document.pdf">File PDF</a><br>
<a href="resume.docx">File DOCX</a><br>
<img src="logo.png" width="50">

Hasilnya:

File PDF
File DOCX

5. Selektor [attr*="value"] (Mengandung)

Memilih elemen yang nilai atributnya mengandung value tertentu (di mana pun posisinya). Simbol * artinya "mengandung".

Contoh:

<style>
    /* Link yang mengandung "google" */
    a[href*="google"] {
        background-color: #eef2ff;
        padding: 2px 6px;
        border-radius: 4px;
    }
    
    /* Class yang mengandung "btn" */
    [class*="btn"] {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 6px;
        background-color: #3b82f6;
        color: white;
        text-decoration: none;
    }
    
    /* Input placeholder mengandung "nama" */
    input[placeholder*="nama"] {
        border-color: #3b82f6;
    }
</style>

<a href="https://www.google.com/search">Google Search</a><br>
<a href="https://mail.google.com">Gmail</a><br>
<a href="#" class="btn-primary">Tombol</a>
<input type="text" placeholder="Masukkan nama lengkap">

Hasilnya:

Google Search
Gmail
Tombol

6. Selektor [attr~="value"] (Dipisah Spasi)

Memilih elemen yang nilai atributnya mengandung value sebagai kata terpisah spasi. Berguna untuk seleksi class.

Contoh:

<style>
    /* Elemen dengan class "warning" (sebagai kata terpisah) */
    [class~="warning"] {
        background-color: #fee2e2;
        border-left: 4px solid #ef4444;
        padding: 10px;
    }
    
    /* Elemen dengan class "success" */
    [class~="success"] {
        background-color: #dcfce7;
        border-left: 4px solid #22c55e;
        padding: 10px;
    }
</style>

<div class="alert warning">Peringatan! Ada kesalahan.</div>
<div class="alert success">Berhasil! Data tersimpan.</div>
<div class="warningbox">Ini tidak terpilih (warningbox bukan kata terpisah)</div>

Hasilnya:

Peringatan! Ada kesalahan.
Berhasil! Data tersimpan.
Ini tidak terpilih (warningbox bukan kata terpisah)

7. Selektor [attr|="value"] (Dipisah Strip)

Memilih elemen yang nilai atributnya dimulai dengan value lalu diikuti strip (-). Berguna untuk seleksi bahasa (lang).

Contoh:

<style>
    /* Elemen dengan lang="en" atau lang="en-US" */
    [lang|="en"] {
        font-style: italic;
        color: #3b82f6;
    }
    
    /* Elemen dengan lang="id" */
    [lang|="id"] {
        font-weight: bold;
        color: #22c55e;
    }
</style>

<p lang="en">This is English text.</p>
<p lang="en-US">This is American English text.</p>
<p lang="id">Ini adalah teks bahasa Indonesia.</p>
<p lang="id-JK">Ini teks dengan dialek Jakarta.</p>

Hasilnya:

This is English text.

This is American English text.

Ini adalah teks bahasa Indonesia.

Ini teks dengan dialek Jakarta.

Contoh Proyek: Form Styling dengan Selektor Atribut

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selektor Atribut - Form Styling</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 24px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        }
        
        h1 {
            color: #1e293b;
            text-align: center;
            margin-bottom: 10px;
        }
        
        .subtitle {
            text-align: center;
            color: #64748b;
            margin-bottom: 30px;
            border-bottom: 2px solid #e2e8f0;
            padding-bottom: 15px;
        }
        
        /* ========== SELEKTOR ATRIBUT ========== */
        
        /* Semua input yang required */
        [required] {
            border-color: #3b82f6;
            border-width: 2px;
        }
        
        /* Semua input yang disabled */
        [disabled] {
            background-color: #f1f5f9;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        /* Input type text dan email */
        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        select,
        textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        /* Input type text dan email saat focus */
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        input[type="password"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59,130,246,0.2);
        }
        
        /* Input dengan placeholder mengandung "nama" */
        input[placeholder*="nama"] {
            border-color: #22c55e;
        }
        
        /* Tombol submit */
        button[type="submit"] {
            width: 100%;
            background-color: #3b82f6;
            color: white;
            border: none;
            padding: 14px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        button[type="submit"]:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
        }
        
        /* Link download file PDF */
        a[href$=".pdf"] {
            display: inline-block;
            background-color: #fee2e2;
            color: #ef4444;
            padding: 5px 12px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            margin-top: 10px;
        }
        
        a[href$=".pdf"]::before {
            content: "📄 ";
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1e293b;
        }
        
        .required-star {
            color: #ef4444;
        }
        
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 25px;
        }
        
        .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>Form Pendaftaran</h1>
        <p class="subtitle">Gunakan selektor atribut untuk styling</p>
        
        <form>
            <div class="form-group">
                <label>Nama Lengkap <span class="required-star">*</span></label>
                <input type="text" placeholder="Masukkan nama lengkap" required>
            </div>
            
            <div class="form-group">
                <label>Email <span class="required-star">*</span></label>
                <input type="email" placeholder="contoh@email.com" required>
            </div>
            
            <div class="form-group">
                <label>Nomor Telepon</label>
                <input type="tel" placeholder="08xx-xxxx-xxxx">
            </div>
            
            <div class="form-group">
                <label>Password <span class="required-star">*</span></label>
                <input type="password" placeholder="Minimal 8 karakter" required>
            </div>
            
            <div class="form-group">
                <label>Kota Domisili</label>
                <select>
                    <option>Pilih Kota</option>
                    <option>Jakarta</option>
                    <option>Surabaya</option>
                    <option>Bandung</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>Alamat Lengkap</label>
                <textarea rows="3" placeholder="Jalan, RT/RW, Kelurahan, Kecamatan"></textarea>
            </div>
            
            <div class="form-group">
                <label>Kode Voucher (opsional)</label>
                <input type="text" placeholder="DISKON50" disabled>
            </div>
            
            <button type="submit">Daftar Sekarang</button>
        </form>
        
        <div style="margin-top: 20px; text-align: center;">
            <a href="download/panduan.pdf">Download Panduan PDF</a>
        </div>
        
        <div class="info-box">
            <h3>Selektor Atribut yang Digunakan:</h3>
            <ul>
                <li><code>[required]</code> → styling input wajib (border biru)</li>
                <li><code>[disabled]</code> → styling input nonaktif (background abu)</li>
                <li><code>input[type="text"]</code> → styling input text</li>
                <li><code>input[type="email"]</code> → styling input email</li>
                <li><code>input[placeholder*="nama"]</code> → styling khusus input dengan placeholder mengandung "nama"</li>
                <li><code>button[type="submit"]</code> → styling tombol submit</li>
                <li><code>a[href$=".pdf"]</code> → styling link download PDF dengan icon</li>
            </ul>
            
            <h3 style="margin-top: 20px;">Ringkasan Jenis Selektor Atribut:</h3>
            <ul>
                <li><code>[attr]</code> → memiliki atribut</li>
                <li><code>[attr="value"]</code> → nilai sama persis</li>
                <li><code>[attr^="value"]</code> → dimulai dengan value</li>
                <li><code>[attr$="value"]</code> → diakhiri dengan value</li>
                <li><code>[attr*="value"]</code> → mengandung value</li>
                <li><code>[attr~="value"]</code> → mengandung kata terpisah spasi</li>
                <li><code>[attr|="value"]</code> → dimulai dengan value lalu diikuti strip (-)</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual form:

Form Pendaftaran

Gunakan selektor atribut untuk styling

Selektor Atribut yang Digunakan: [required], [disabled], input[type="text"], a[href$=".pdf"]

Tabel Ringkasan Selektor Atribut

Selektor Contoh Elemen yang Terpilih
[disabled] <button disabled> Semua elemen dengan atribut disabled
[type="text"] <input type="text"> Input dengan type="text"
[href^="https"] <a href="https://..."> Link yang dimulai dengan https
[src$=".png"] <img src="logo.png"> Gambar dengan ekstensi .png
[href*="google"] <a href="https://google.com"> Link yang mengandung kata "google"
[class~="btn"] <div class="btn primary"> Elemen dengan class "btn" sebagai kata terpisah
[lang|="en"] <p lang="en-US"> Elemen dengan lang dimulai "en" lalu strip

Kesalahan Umum Pemula

  • Lupa tanda kurung siku [] → type="text" (salah) vs [type="text"] (benar).
  • Lupa tanda kutip pada nilai → [type=text] (boleh tapi tidak disarankan) vs [type="text"] (disarankan).
  • Mengira selektor atribut case-sensitive → Atribut HTML biasanya case-insensitive, tapi nilai atributnya case-sensitive.
  • Menggunakan simbol ^, $, * tanpa tanda kurung siku yang benar → Pastikan format penulisan tepat.
  • Mengira [class~="btn"] sama dengan [class*="btn"] → [class~="btn"] hanya cocok jika "btn" sebagai kata terpisah, [class*="btn"] cocok dengan "btn" di mana pun (termasuk "btn-primary", "submitbtn").
Debugging Tips:
  • Buka Developer Tools (F12) → inspect elemen → lihat apakah selektor atribut muncul di panel Styles
  • Jika selektor tidak muncul, periksa apakah nama atribut dan nilai sudah tepat
  • Untuk debugging selektor kompleks, coba selektor sederhana dulu, lalu tambahkan kompleksitas

Latihan Singkat

  1. Buat file HTML dengan beberapa link, styling link eksternal (https) dengan warna hijau
  2. Styling link download PDF dengan icon 📄 menggunakan ::before
  3. Buat form dengan input type text, email, password. Styling masing-masing dengan border warna berbeda
  4. Styling input yang required dengan border biru
  5. Styling input yang disabled dengan background abu-abu
  6. Simpan dan buka di browser, amati hasilnya

Intisari Hari Ini

  • Selektor atribut memilih elemen berdasarkan atribut dan nilainya
  • [attr] → elemen memiliki atribut tersebut
  • [attr="value"] → nilai atribut sama persis
  • [attr^="value"] → nilai atribut dimulai dengan value
  • [attr$="value"] → nilai atribut diakhiri dengan value
  • [attr*="value"] → nilai atribut mengandung value
  • [attr~="value"] → nilai atribut mengandung kata terpisah spasi
  • [attr|="value"] → nilai atribut dimulai dengan value lalu strip (-)
  • Sangat berguna untuk styling form, link eksternal, file download, dan elemen dinamis
Tantangan: Buat sebuah Halaman Dashboard Admin dengan berbagai elemen yang menggunakan selektor atribut! Persyaratan:
  • Tabel data dengan status (aktif/nonaktif) menggunakan atribut data-status
  • Styling berbeda untuk status "active" dan "inactive" menggunakan selektor atribut
  • Link dengan icon berbeda berdasarkan ekstensi file (.pdf, .doc, .jpg) menggunakan [attr$="value"]
  • Input form dengan validasi visual menggunakan [required] dan [disabled]
  • Tombol dengan icon berdasarkan type (submit, reset, button)
  • Card yang memiliki atribut data-priority="high", "medium", "low" dengan warna berbeda
  • Tambahkan kotak penjelasan yang mendokumentasikan semua selektor atribut yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #8 - Pseudo-element (before, after, first-line, first-letter, selection)
Artikel Selanjutnya: CSS Dasar #10 - Warna di CSS: Named Colors, HEX, RGB, RGBA, HSL, HSLA

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

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