Selectors CSS: Cara Menargetkan Elemen dengan Tepat

Mei 20, 2025

Apa Itu CSS Selector?

CSS selector adalah bagian dari kode CSS yang menentukan elemen HTML mana yang akan diberi gaya (style). Dengan selector, kita bisa memilih satu atau beberapa elemen secara spesifik untuk diatur tampilannya.

Pemahaman tentang selector sangat penting karena menjadi dasar dari semua styling dalam CSS. Semakin mahir Anda menggunakan selector, semakin mudah dan efisien proses pengembangan website.

Struktur Dasar CSS Selector

Setiap aturan CSS terdiri dari:

selector {
    property: value;
}

Contoh:

p {
    color: blue;
}

Selector p akan menargetkan semua paragraf di halaman tersebut.

Jenis-Jenis CSS Selector

Berikut adalah beberapa jenis selector yang umum digunakan dalam CSS:

1. Element Selector

Menargetkan elemen berdasarkan nama tag HTML.

h1 {
    font-size: 24px;
}

Menargetkan semua elemen <h1>.

2. Class Selector

Menargetkan elemen berdasarkan atribut class. Ditandai dengan titik (.).

.teks-merah {
    color: red;
}

Bisa digunakan pada:

<p class="teks-merah">Paragraf ini berwarna merah.</p>

💡 Satu class bisa digunakan di banyak elemen.

3. ID Selector

Menargetkan elemen berdasarkan atribut id. Ditandai dengan pagar (#). ID bersifat unik — hanya boleh digunakan sekali per halaman.

#judul-utama {
    font-weight: bold;
}

Digunakan pada:

<h1 id="judul-utama">Ini adalah judul utama</h1>

4. Universal Selector

Menargetkan semua elemen di halaman. Ditandai dengan tanda bintang (*).

* {
    margin: 0;
    padding: 0;
}

⚠️ Gunakan dengan hati-hati karena dapat memengaruhi seluruh elemen.

5. Grouping Selector

Memilih beberapa selector sekaligus dengan gaya yang sama.

h1, h2, h3 {
    color: darkblue;
}

6. Descendant Selector

Menargetkan elemen yang merupakan turunan dari elemen lain. Dipisahkan dengan spasi.

div p {
    background-color: yellow;
}

Hanya akan menargetkan <p> yang berada di dalam <div>.

7. Child Selector (>)

Menargetkan elemen anak langsung dari suatu elemen.

ul > li {
    list-style: square;
}

Hanya <li> yang langsung di bawah <ul> yang akan terpengaruh.

8. Adjacent Sibling Selector (+)

Menargetkan elemen yang langsung mengikuti elemen tertentu.

h2 + p {
    font-style: italic;
}

Hanya <p> yang langsung setelah <h2> yang akan miring.

9. General Sibling Selector (~)

Menargetkan elemen saudara (sibling), tidak harus langsung mengikuti.

h2 ~ p {
    text-decoration: underline;
}

Semua <p> yang berada setelah <h2> akan bergaris bawah.

10. Attribute Selector

Menargetkan elemen berdasarkan atribut tertentu.

input[type="text"] {
    border: 1px solid gray;
}

Hanya input dengan type="text" yang akan memiliki border abu-abu.

11. Pseudo-Class Selector

Selector khusus yang menargetkan state atau kondisi tertentu dari elemen.

a:hover {
    color: orange;
}

Gaya akan aktif saat pengguna mengarahkan mouse ke link.

Contoh lain:

:active – ketika elemen sedang diklik
:focus – ketika elemen mendapat fokus (misalnya form input)
:visited – untuk link yang sudah dikunjungi

12. Pseudo-Element Selector

Untuk menargetkan bagian tertentu dari elemen, seperti huruf pertama atau baris pertama.

p::first-letter {
    font-size: 24px;
    font-weight: bold;
}

Huruf pertama dari setiap paragraf akan lebih besar dan tebal.

Contoh lain:

::before dan ::after – menambahkan konten sebelum/ sesudah elemen
::selection – gaya saat pengguna memilih teks

Prioritas dan Specificity

Ketika dua aturan CSS bertentangan, browser akan memilih aturan yang memiliki specificity lebih tinggi.

Urutan prioritas (dari rendah ke tinggi):

Element selector (div, p)
Class selector (.kelas)
Pseudo-class (:hover, :nth-child)
Attribute selector ([type="text"])
ID selector (#id)
Inline style (style="...")

Anda juga bisa memaksa aturan dengan !important, tetapi hindari penggunaan berlebihan karena susah dikelola.

Kesimpulan

CSS selector adalah jalan masuk untuk memberikan gaya pada elemen HTML. Dengan menguasai berbagai jenis selector, Anda bisa membuat desain web yang presisi dan dinamis. Selanjutnya, kita akan membahas Box Model CSS, yaitu struktur dasar dari layout web.

💡 Tips Praktis

Gunakan browser developer tools untuk melihat dan menguji selector.
Gunakan class selector untuk styling yang bisa digunakan ulang.
Hindari ID selector jika tidak benar-benar diperlukan.
Latih penggunaan pseudo-class dan pseudo-element untuk interaksi visual yang menarik.

Dasar CSS

Written by Kelvin Y.