Specificity CSS


Apa itu Specificity (Spesifisitas)?

Jika ada dua atau lebih aturan CSS yang saling bertentangan yang mengarah ke elemen yang sama, browser mengikuti beberapa aturan untuk menentukan mana yang paling spesifik.

Pikirkan specificity sebagai skor/peringkat yang menentukan deklarasi style mana yang pada akhirnya diterapkan pada suatu elemen.

Selektor universal (*) memiliki spesifisitas rendah, sedangkan selektor ID sangat spesifik, sehingga selektor ID yang akan diterapkan pada suatu elemen.

Catatan: Specificity adalah alasan umum mengapa aturan CSS tidak berlaku untuk beberapa elemen, meskipun menurut Anda seharusnya demikian.


Hirarki Spesificity

Setiap selektor memiliki tempatnya dalam hierarki spesificity. Ada empat kategori yang menentukan tingkat spesifisitas pemilih:

Inline styles - Sebuah inline style dilampirkan langsung ke elemen yang akan ditata. Contoh: <h1 style="warna: #ffffff;">.

ID - Sebuah ID adalah pengidentifikasi unik untuk elemen halaman, contoh #navbar.

Class, atribut dan pseudo-class - Kategori ini mencakup .class, [atribut] dan pseudo-class seperti :hover, :focus, dll.

Element dan pseudo-element - Kategori ini mencakup nama elemen dan pseudo-element (elemen semu), seperti h1, div, :before dan :after.


Bagaimana Menghitung Spesificity?

Mulai dari 0, tambahkan 1000 untuk atribut style, tambahkan 100 untuk setiap ID, tambahkan 10 untuk setiap atribut, class atau pseudo-class, tambahkan 1 untuk setiap nama elemen atau pseudo-element.

Lihat tiga fragmen kode ini:

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">
    Heading</h1></div>

Keterangan:

Spesifisitas A adalah 1 (satu elemen)

Spesifisitas B adalah 101 (satu ID dan satu elemen)

Spesifisitas C adalah 1000 (styling inline)

Karena 1 < 101 < 1000, maka aturan ketiga (C) memiliki tingkat spesifisitas yang lebih besar, dan karenanya akan diterapkan.


Aturan Specificity

Spesifisitas sama: kode/perintah terakhir yang diterapkan - Jika perintah yang sama ditulis dua kali ke dalam file css eksternal, maka perintah setelahnya di file css yang lebih dekat ke elemen yang akan diterapkan.


Contoh

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

Hasil

Ini adalah heading 1


Selektor ID memiliki spesifisitas yang lebih tinggi daripada selektor atribut - Perhatikan tiga baris kode berikut.


Contoh

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Hasil

Ini adalah sebuah div

Perintah pertama lebih spesifik daripada dua lainnya, maka kode/perintah pertama yang akan diterapkan.


Selektor kontekstual lebih spesifik daripada selektor elemen tunggal - File css yang disematkan lebih dekat ke elemen yang akan diterapkan. Jadi dalam contoh situasi dibawah ini, kode/perintah terakhir yang akan diterapkan.


Contoh

Dari file CSS external:
#content h1 {background-color: red;}

di file HTML:
<style>
#content h1 {
  background-color: yellow;
}
</style>

Sebuah kelas selektor mengalahkan sejumlah selektor elemen - selektor kelas seperti .intro mengalahkan h1, p, div, dll.


Contoh

.intro {background-color: yellow;}
h1 {background-color: red;}

Hasil

Ini adalah heading


Selektor universal dan nilai yang diwariskan memiliki spesifisitas 0 - *, body * dan yang serupa memiliki spesifisitas nol. Nilai yang diwariskan juga memiliki spesifisitas 0.

Komentar

Posting Komentar