Jenis Selector CSS: Element, Class, ID hingga Pseudo

Jenis selector CSS adalah salah satu materi paling mendasar sekaligus paling menentukan dalam perjalanan belajar web development. Selector menentukan elemen mana saja yang akan terkena aturan style yang Anda tulis — kalau salah pilih selector, style tidak akan pernah sampai ke elemen yang dituju, dan halaman pun terlihat berantakan. Banyak pemula yang baru mengenal CSS mengira cukup menghafal sintaks, padahal kunci sebenarnya ada di pemahaman bagaimana setiap jenis selector bekerja dan kapan harus dipakai. Dalam artikel ini kita akan membedah semua jenis selector CSS yang perlu Anda kuasai: dari element selector, class, ID, universal, attribute, hingga combinator, pseudo-class, dan pseudo-element. Setiap bagian dilengkapi contoh kode dan skenario nyata, jadi Anda tidak hanya tahu cara menulisnya, tetapi juga mengerti kapan dan mengapa menggunakannya.

Apa Itu Jenis Selector CSS dan Mengapa Penting?

Secara sederhana, selector CSS adalah pola yang dipakai untuk menargetkan elemen HTML tertentu agar bisa diberikan styling. Ketika browser membaca stylesheet, ia mencocokkan setiap selector dengan struktur DOM halaman, lalu menerapkan deklarasi style ke elemen yang cocok. Semakin tepat selector yang Anda tulis, semakin kecil kemungkinan terjadi kebocoran style — misalnya style yang tidak sengaja menimpa elemen lain.

Tanpa pemahaman selector yang baik, Anda akan sering menghadapi masalah seperti: style tidak diterapkan padahal kode sudah benar, harus menulis ulang aturan yang sama berkali-kali, atau konflik antar aturan yang sulit dilacak. Karena itu, menguasai jenis-jenis selector CSS bukan sekadar soal pengetahuan teori, melainkan keterampilan praktis yang memengaruhi kecepatan kerja dan kualitas kode Anda sehari-hari.

Jika Anda baru pertama kali menyentuh CSS, ada baiknya memahami dulu apa itu CSS dan perannya di halaman web melalui artikel Pengertian CSS (Cascading Style Sheet) sebelum mendalami setiap jenis selector CSS di bawah.

Element Selector (Tag Selector)

Element selector adalah jenis selector paling dasar dan paling mudah dipahami. Ia menargetkan semua elemen HTML berdasarkan nama tag-nya, tanpa mempedulikan class atau ID. Seluruh elemen yang memiliki tag sama akan menerima aturan yang sama pula.

p { color: #333333; font-size: 16px; line-height: 1.6;
} h1 { color: #0073aa; font-size: 28px;
}

Pada contoh di atas, semua elemen <p> di halaman otomatis berwarna gelap dengan ukuran font 16px, sementara semua <h1> mendapat warna biru. Element selector sangat cepat dari sisi performa karena browser langsung tahu targetnya tanpa perlu menghitung spesifisitas yang rumit.

Kapan menggunakannya: cocok untuk menerapkan style dasar global, misalnya menetapkan font default untuk seluruh paragraf, warna dasar heading, atau line-height yang konsisten di seluruh situs. Ini juga langkah awal yang baik dalam membangun desain sistem yang rapi.

Class Selector

Class selector menggunakan tanda titik (.) diikuti nama class, dan menjadi salah satu jenis selector CSS yang paling sering dipakai dalam proyek nyata. Keunggulan utamanya: satu class bisa dipakai oleh banyak elemen berbeda, sehingga Anda tidak perlu menulis aturan berulang-ulang.

<p class="highlight">Paragraf ini di-highlight</p>
<div class="highlight">Div ini juga di-highlight</div>
<span class="highlight">Span ini juga sama</span>

.highlight { background-color: #fff3cd; padding: 10px; border-left: 4px solid #ffc107; border-radius: 4px;
}

Perhatikan bahwa tiga elemen berbeda — <p>, <div>, dan <span> — semuanya mendapat style yang sama hanya dengan satu aturan CSS. Keunggulan class selector:

• Reusable — satu class bisa dipakai di banyak elemen tanpa mengulang kode.
• Fleksibel — bisa diterapkan ke elemen apa pun: paragraf, div, span, link, tombol, dan lainnya.
• Mudah dipelihara — mengubah satu aturan class otomatis memperbarui semua elemen yang memakainya.

Dalam praktiknya, class selector menjadi tulang punggung hampir semua framework CSS seperti Bootstrap dan Tailwind. Konsep utility class di Tailwind bahkan berangkat dari ide bahwa class bisa dikombinasikan secara bebas untuk membentuk tampilan apa pun.

ID Selector

ID selector menggunakan tanda pagar (#) diikuti nama ID. Berbeda dengan class, sebuah ID hanya boleh digunakan satu kali dalam satu halaman HTML karena sifatnya unik — inilah yang membuat ID selector sangat spesifik.

<header id="main-header">Header Utama</header>

#main-header { background-color: #0073aa; color: white; padding: 20px; text-align: center;
}

ID selector memiliki spesifisitas lebih tinggi dibanding class selector. Jika dua selector menargetkan elemen yang sama, aturan dari ID selector yang akan menang. Namun justru karena sifatnya yang terlalu spesifik, ID jarang direkomendasikan untuk styling yang bersifat berulang. Gunakan ID untuk elemen yang benar-benar unik — seperti header utama, sidebar, atau sebagai hook untuk JavaScript.

Class vs ID: Kapan Menggunakan Mana?

Universal Selector

Universal selector menggunakan tanda bintang (*) untuk menargetkan semua elemen di halaman sekaligus. Kegunaan paling umumnya adalah untuk reset CSS, yaitu menghilangkan margin dan padding default yang berbeda-beda antar browser.

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

Sesuai dokumentasi resmi MDN Web Docs, universal selector memiliki spesifisitas 0, sehingga sangat mudah ditimpa oleh selector lain. Ini sekaligus kelebihan dan kekurangannya: ia bagus sebagai default, tetapi jangan terlalu bergantung padanya. Terlalu banyak rule universal yang berat bisa memengaruhi performa rendering, terutama pada halaman dengan DOM yang besar.

Attribute Selector

Attribute selector menargetkan elemen berdasarkan atribut yang dimilikinya atau nilai dari atribut tersebut. Jenis selector CSS ini sangat berguna untuk styling yang presisi, terutama pada formulir dan elemen dinamis.

/* Semua link yang punya atribut target */
a[target] { color: #0073aa;
} /* Link yang membuka tab baru */
a[target="_blank"] { padding-right: 15px;
} /* Input dengan type email */
input[type="email"] { border: 2px solid #28a745;
} /* Attribute yang mengandung kata tertentu */
[class*="btn"] { cursor: pointer;
} /* Attribute yang dimulai dengan nilai tertentu */
[href^="https"] { color: green;
} /* Attribute yang diakhiri dengan nilai tertentu */
[href$=".pdf"]::after { content: " (PDF)";
}

Kombinasi operator *= (mengandung), ^= (diawali), dan $= (diakhiri) membuat attribute selector sangat fleksibel. Misalnya, Anda bisa membedakan tampilan link internal dan eksternal, memberi ikon otomatis pada file PDF, atau memberi border berbeda pada input yang valid dan tidak valid — semuanya tanpa menambah satu baris pun di HTML.

Combinator Selector

Combinator selector menggabungkan dua atau lebih selector untuk mendefinisikan hubungan antar elemen. Ada empat jenis kombinator yang wajib Anda kenal:

1. Descendant Selector (spasi)

Memilih elemen di dalam elemen lain, di tingkat kedalaman berapa pun — selama masih berada di dalam parent yang ditentukan.

nav a { text-decoration: none; color: #333;
}

Aturan di atas menargetkan semua <a> yang berada di dalam <nav>, meskipun ada elemen lain di antara keduanya, seperti <ul> dan <li>.

2. Child Selector (>)

Memilih elemen yang menjadi anak langsung (direct child) dari parent-nya. Elemen di tingkat lebih dalam tidak akan terpengaruh.

nav > a { display: inline-block; padding: 10px 20px;
}

Hanya <a> yang langsung menjadi anak dari <nav> yang dipilih. Jika link dibungkus <ul><li>, ia tidak akan terkena aturan ini.

3. Adjacent Sibling Selector (+)

Memilih elemen yang langsung berada setelah elemen lain pada level yang sama (sibling), tepat satu posisi setelahnya.

h2 + p { margin-top: 0; color: #666;
}

Aturan ini menargetkan paragraf pertama yang langsung mengikuti heading <h2>. Pola ini sering dipakai untuk memberi jarak yang pas antara judul dan paragraf pembuka.

4. General Sibling Selector (~)

Memilih semua elemen yang berada setelah elemen lain dalam parent yang sama, tidak harus langsung bersebelahan.

h2 ~ p { padding-left: 20px;
}

Berbeda dengan + yang hanya memilih satu elemen, ~ memilih semua <p> yang muncul setelah <h2> selama masih satu parent.

Pseudo-Class Selector

Pseudo-class memilih elemen berdasarkan state atau kondisi tertentu yang tidak bisa diungkapkan dengan selector biasa. Ditulis dengan satu titik dua (:). Inilah senjata utama untuk membuat website terasa interaktif tanpa perlu JavaScript.

/* State hover */
a:hover { color: #0073aa; text-decoration: underline;
} /* Link yang sudah dikunjungi */
a:visited { color: #551a8b;
} /* Elemen pertama dan terakhir */
li:first-child { font-weight: bold;
} li:last-child { border-bottom: none;
} /* Elemen ganjil/genap */
tr:nth-child(odd) { background-color: #f9f9f9;
} tr:nth-child(even) { background-color: #ffffff;
} /* Form focus state */
input:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 5px rgba(0,115,170,0.5);
} /* Form valid/invalid */
input:valid { border-color: #28a745;
} input:invalid { border-color: #dc3545;
}

Pseudo-class seperti :hover, :focus, :active, :nth-child(), dan :not() adalah yang paling sering dipakai. Dengan :nth-child() misalnya, Anda bisa membuat tabel bergaris zebra tanpa menambahkan class satu per satu di HTML. Daftar lengkap pseudo-class bisa dilihat di MDN Web Docs: Pseudo-classes.

Pseudo-Element Selector

Pseudo-element memilih bagian tertentu dari sebuah elemen, bukan keseluruhan elemen. Ditulis dengan dua titik dua (::). Kegunaannya luar biasa untuk menambahkan elemen dekoratif tanpa mengubah markup HTML.

/* Menambahkan konten sebelum elemen */
h2::before { content: "\25B8 "; color: #0073aa;
} /* Menambahkan konten setelah elemen */
a.external::after { content: " \2197"; font-size: 12px;
} /* Mengganti huruf pertama */
p::first-letter { font-size: 2em; font-weight: bold; float: left; margin-right: 5px;
} /* Mengganti baris pertama */
p::first-line { font-variant: small-caps;
} /* Highlight teks yang dipilih user */
::selection { background-color: #0073aa; color: white;
}

Dengan pseudo-element, Anda bisa menambahkan ikon, tanda panah, atau dekorasi lain tanpa menambah elemen ekstra di HTML — menjaga struktur halaman tetap bersih dan semantik. Ini sangat membantu ketika Anda bekerja dengan CMS atau template yang tidak bisa diubah markup-nya secara bebas.

Grouping Selector

Grouping selector memungkinkan Anda menerapkan style yang sama ke beberapa selector sekaligus dengan memisahkannya menggunakan koma (,). Ini mengurangi pengulangan kode secara drastis dan membuat stylesheet lebih mudah dirawat.

/* Tanpa grouping — mengulang kode */
h1 { color: #0073aa; }
h2 { color: #0073aa; }
h3 { color: #0073aa; } /* Dengan grouping — lebih efisien */
h1, h2, h3 { color: #0073aa;
}

Grouping sangat berguna ketika Anda menerapkan style yang sama pada banyak elemen — misalnya reset font untuk semua heading, atau warna brand untuk semua elemen utama. Jika nanti warnanya berubah, Anda cukup mengubah satu tempat.

Memahami Spesifisitas Selector CSS

Setiap jenis selector CSS memiliki tingkat spesifisitas yang menentukan aturan mana yang menang ketika terjadi konflik. Urutannya dari yang terendah hingga tertinggi:

Universal selector (*) → spesifisitas: 0
Element / Pseudo-element → spesifisitas: 1
Class / Attribute / Pseudo → spesifisitas: 10
ID selector → spesifisitas: 100
Inline style → spesifisitas: 1000
!important → menimpa segalanya

Pahami hierarki ini agar Anda tidak terjebak kebiasaan menumpuk !important. Ketika sebuah style tidak berubah meski sudah diganti, biasanya penyebabnya adalah spesifisitas yang lebih tinggi dari selector lain — bukan karena kodenya salah. Atur spesifisitas secara natural dengan memilih selector yang tepat, dan gunakan !important hanya untuk kasus yang benar-benar mendesak.

Tips Menggunakan Selector Secara Efektif

1. Utamakan class selector — fleksibel, reusable, dan spesifisitasnya seimbang untuk hampir semua kebutuhan styling.
2. Hindari ID untuk styling — spesifisitasnya terlalu tinggi dan menyulitkan override. Simpan ID untuk kebutuhan JavaScript atau anchor link.
3. Jaga selector tetap dangkal — hindari rantai panjang seperti div > ul > li > a > span. Semakin dalam, semakin sulit dibaca dan semakin mahal untuk browser memprosesnya.
4. Manfaatkan grouping — gabungkan selector yang berbagi style yang sama untuk mengurangi duplikasi.
5. Terapkan naming convention — metodologi seperti BEM (Block Element Modifier) membantu menjaga selector tetap terstruktur dan mudah diprediksi saat proyek membesar.

Kesimpulan

Menguasai jenis selector CSS bukan hanya soal hafalan, melainkan tentang memahami cara kerja browser dalam mencocokkan aturan dengan elemen. Dengan menguasai element, class, ID, universal, attribute, combinator, pseudo-class, pseudo-element, dan grouping selector, Anda bisa menulis style yang jauh lebih presisi, efisien, dan mudah dirawat. Mulailah dengan class selector sebagai kebiasaan utama, pahami spesifisitas sebelum menumpuk !important, dan selalu jaga selector tetap sederhana. Langkah berikutnya yang bagus untuk dilanjutkan adalah mempelajari box model, flexbox, dan CSS Grid — fondasi layout yang akan membuat halaman Anda tidak hanya rapi dari sisi style, tetapi juga dari sisi struktur.

Hal yang sering ditanyakan seputar Jenis Selector CSS