Perhitungan selektor spesifik pada css

Jika Anda menulis kode yang sama persis sekali pun, browser akan memproses hanya satu kode. Nah disi

Selektor spesifik

Terkadang seseorang menulis code CSS sama persis entah itu disengaja atau tidak, keduanya bertentangan dan mengarah ke unsur yang sama. Browser tidak akan memproses keduanya, tetapi hanya satu dan menentukan mana yang paling spesifik untuk digunakan. Ini mungkin bisa menjadi masalah, pada pembahasan kali ini kita akan membahas spesifikasi pada selektor CSS.

Susunan CSS spesifik

Setiap selektor memiliki tempat dalam susunan atau hirarki yang lebih spesifik. Didalam CSS sendiri ada empat kategori yang menentukan tingkat spesifik dalam sebuah selektor, Berikut list nya:

  • Style inline – Mencampurkan HTML dengan CSS secara langsung pada elemen. Sebagi contoh: <h1 style=”color: red;”></h1>
  • Id – Sebuah atribut identifikasi unik untuk elemen. Sebagai contoh: #footer
  • Class, atribut dan pseudo-classes – Kategori ini meliputi .class, [atribut] dan pseudo-classes. Sebagai contoh: hover, : fokus dll
  • Elemen dan pseudo-elemen – Kategori ini meliputi nama elemen dan pseudo-elemen. Sebagai contoh: h1, span ::before, ::after dll

Perhitungan CSS spesifikasi

Agar Anda bisa mengetahui selektor yang lebih spesifikasi itu yang mana, maka Anda harus menghitungnya. Berikut cara menghitungnya:

Semuanya dimulai dari 0
Untuk atribut style maka bertambah jadi 1000
Untuk setiap atribut id maka bertambah jadi 100
Untuk setiap atribut, class atau pseudo-classes maka bertambah jadi 10
Untuk setiap nama elemen atau pseudo-elemen maka bertambah jadi 1

Perhatikan tiga fragmen kode ini:

Contoh kode fragmen sederhana

h1 {
    color: blue;
}
#judul h1 {
    color: red;
}
<h1 style="color: green">Heading</h1>

Spesifikasi dari (h1) adalah 1 (didapat dari nama elemen) 
Spesifikasi dari (#judul h1) adalah 101 (didapat dari ID dan dari nama elemen) 
Spesifikasi dari (<h1 style=”color:#fff”>Heading</h1>) adalah 1000 (didapat dari atribut style)

Sejak 1 < 101 < 1000, contoh aturan ketiga memiliki tingkat yang lebih besar dari spesifikasi, dan karena itu akan diterapkan.

Aturan dalam CSS spesifikasi

Jika sebuah kode ditulis dua kali didalam CSS dan mengarah ke unsur yang sama, maka kode yang lebih baru yang akan diterapkan.

h1 {
    background-color: red;
    background-color: orange;
}

Selektor Id memiliki spesifikasi yang lebih tinggi dari pada selektor atribut.

div#box {
    background-color: red;
}
#box {
    background-color: blue;
}
div[id=”box”] {
    background-color: yellow;
}

Selektor class memiliki spesifikasi yang lebih tinggi dari pada selektor nama elemen.

.judul {
    background-color: yellow;
}
h1 {
    background-color: blue;
}