Specificity CSS: Memahami Prioritas Selector
Apa Itu Specificity?
Specificity atau prioritas selector adalah aturan dalam CSS yang menentukan gaya mana yang akan diterapkan jika ada lebih dari satu aturan CSS yang menargetkan elemen yang sama.
Ketika dua atau lebih aturan CSS bertentangan, browser tidak memilih secara acak — ia menggunakan sistem poin berdasarkan jenis selector untuk memutuskan mana yang lebih kuat dan harus diterapkan.
Memahami specificity sangat penting karena:
- Membantu menghindari konflik styling.
- Mempermudah debugging saat gaya tidak diterapkan seperti yang diharapkan.
- Meningkatkan kualitas kode CSS agar lebih mudah dipelihara.
1. Bagaimana Cara Kerja Specificity?
Setiap jenis selector memiliki bobot tertentu:
| Jenis Selector | Bobot (poin) |
|---|---|
| Inline style (style="...") | 1000 |
| ID selector (#id) | 0100 |
| Class selector (.kelas), attribute selector ([type="text"]), pseudo-class (:hover, :nth-child) | 0010 |
| Element selector (div, p), pseudo-element (::before, ::after) | 0001 |
| Universal selector (*), combinators (+, >, ~, spasi) | 0000 |
Contoh Perhitungan Specificity:
| Selector | Poin Specificity |
|---|---|
| p | 0001 |
| p.error | 0011 |
| #menu li.selected | 0111 |
| div#header > p::first-line | 1002 |
💡 Semakin tinggi nilai specificity, semakin kuat aturan tersebut.
2. Urutan Prioritas (dari yang terkuat)
Berikut urutan prioritas selector dari yang paling kuat ke lemah:
Inline Style
- Gaya yang ditulis langsung dalam atribut HTML.
- Contoh: <p style="color: red;">Ini teks merah</p>
ID Selector
- Contoh: #header { background: blue; }
Class, Attribute, dan Pseudo-Class
- Contoh: .btn, [type="text"], :hover
Element Selector dan Pseudo-Element
- Contoh: p, ul, ::before, ::after
Universal Selector dan Combinator
- Contoh: *, >, +, ~
3. Contoh Kasus Konflik Specificity
Kasus 1: Mana yang Lebih Kuat?
/* Rule 1 */
#menu {
color: red;
}
/* Rule 2 */
nav ul {
color: blue;
}
HTML:
<nav id="menu">
<ul>
<li>Item 1</li>
</ul>
</nav>
Mana yang diterapkan?
- #menu → specificity = 0100
- nav ul → specificity = 0002
✅ Yang menang: #menu → teks berwarna merah
Kasus 2: ID vs Kelas
/* Rule 1 */
.warna-biru {
color: blue;
}
/* Rule 2 */
#teks {
color: red;
}
HTML:
<p id="teks" class="warna-biru">Paragraf ini</p>
Mana yang diterapkan?
- .warna-biru → specificity = 0010
- #teks → specificity = 0100
✅ Yang menang: #teks → teks berwarna merah
Kasus 3: Kelas vs Kelas + Element
/* Rule 1 */
.btn {
background-color: green;
}
/* Rule 2 */
a.btn {
background-color: orange;
}
HTML:
<a href="#" class="btn">Tombol</a>
Mana yang diterapkan?
- .btn → specificity = 0010
- a.btn → specificity = 0011
✅ Yang menang: a.btn → latar belakang orange
4. Tabel Ringkasan Specificity
| Jenis Selector | ID (0100) | Class (0010) | Element (0001) | Total |
|---|---|---|---|---|
| p | 0 | 0 | 1 | 0001 |
| p.error | 0 | 1 | 1 | 0011 |
| #menu | 1 | 0 | 0 | 0100 |
| #menu .item | 1 | 1 | 0 | 0110 |
| div#content > p::first-line | 1 | 0 | 2 | 1002 |
5. Aturan Penting Lain Tentang Specificity
- Urutan penulisan tidak selalu menentukan, tetapi jika specificity sama, maka aturan terakhir yang akan diterapkan.
- !important mengabaikan specificity, tetapi tidak disarankan digunakan berlebihan karena susah dikelola.
- Selector kompleks tidak selalu lebih kuat — misalnya, div div div .btn tidak lebih kuat dari .btn.
6. Menggunakan !important dengan Bijak
Anda bisa memaksa suatu deklarasi CSS diterapkan meskipun specificity rendah dengan !important.
Contoh:
.paragraph {
color: red !important;
}
p {
color: blue;
}
HTML:
<p class="paragraph">Teks ini akan berwarna merah.</p>
⚠️ Gunakan hanya dalam kasus darurat:
- Overriding CSS eksternal (misalnya dari library)
- Debugging sementara
JANGAN gunakan untuk menggantikan struktur CSS yang buruk.
7. Tools Bantu untuk Menghitung Specificity
Beberapa alat online membantu menghitung specificity:
Masukkan selector CSS Anda, dan alat ini akan memberi tahu nilai specificity-nya.
8. Tips Mengurangi Masalah Specificity
- Hindari penggunaan ID sebisa mungkin — gunakan class untuk styling.
- Gunakan pendekatan metodologi seperti BEM untuk meningkatkan readability dan mengurangi konflik.
- Jangan terlalu banyak bersarang selector (div > ul > li > a).
- Gunakan variabel CSS untuk manajemen warna, font, dll.
- Simpan selector se-sederhana mungkin untuk performa dan kemudahan pemeliharaan.
9. Contoh Praktis
HTML
<div class="container" id="main">
<p class="teks utama">Selamat datang!</p>
</div>
CSS
/* Specificity: 0001 */
p {
color: black;
}
/* Specificity: 0010 */
.teks {
color: blue;
}
/* Specificity: 0010 */
.utama {
color: green;
}
/* Specificity: 0100 */
#main {
color: red;
}
Apa warna akhir dari teks "Selamat datang!"?
🔍 Jawaban: red, karena #main memiliki specificity tertinggi.
10. Kesimpulan
Specificity adalah sistem penilaian yang digunakan oleh browser untuk memilih aturan CSS mana yang diterapkan ketika ada konflik. Dengan memahami bagaimana specificity bekerja, Anda bisa membuat struktur CSS yang lebih baik, menghindari penggunaan !important secara berlebihan, serta memperbaiki bug styling dengan lebih cepat dan efisien.
Selanjutnya, kita akan membahas Inheritance CSS, yaitu cara properti CSS diwariskan dari elemen induk ke anak-anaknya.
💡 Tips Praktis
- Gunakan class selector (.) untuk styling umum.
- Hindari penggunaan ID selector (#) untuk styling kecuali benar-benar perlu.
- Gunakan !important hanya dalam situasi darurat.
- Uji specificity di browser developer tools untuk melihat mana aturan yang aktif.
- Selalu usahakan membuat selector yang sederhana dan reusable.
