Spesifisitas CSS

Apa itu spesifisitas?

Jika ada dua atau lebih aturan CSS yang konflik mengarah ke elemen yang sama, peramban akan mengikuti beberapa prinsip untuk menentukan yang paling khusus, dan oleh karena itu menang.

Lihat spesifisitas (specificity) sebagai skor/tingkat, yang dapat menentukan akhirnya yang mana deklarasi gaya yang akan diterapkan ke elemen.

Pemilih umum (*) memiliki spesifisitas yang rendah, sementara pemilih ID memiliki spesifisitas yang tinggi!

Perhatian:Karakter khusus ini adalah alasan biasa untuk aturan CSS yang tidak berlaku untuk beberapa elemen, meskipun Anda mungkin berpikir seharusnya berlaku.

Hirarki spesifisitas

Setiap pemilih memiliki posisinya di hierarki spesifisitas. Empat kategori berikut menentukan tingkat spesifisitas pemilih:

Gaya dalam baris - Gaya dalam baris (inline) secara langsung disisipkan ke elemen yang disesuaikan. Contoh: <h1 style="color: #ffffff;">.

ID - ID adalah penanda unik elemen halaman, seperti #navbar.

Kelas, atribut, dan pseudo-kelas - Kategori ini termasuk .kelas, [atribut] dan pseudo-kelas, seperti :hover, :focus, dan sebagainya.

Elemen dan pseudo-element - Kategori ini termasuk nama elemen dan pseudo-element, seperti h1, div, :before, dan :after.

Bagaimana cara menghitung spesifisitas?

Ingatlah metode untuk menghitung spesifisitas!

Dari 0 mulai, tambahkan 1000 untuk atribut style, 100 untuk setiap ID, 10 untuk setiap atribut, kelas, atau pseudo-kelas, dan 1 untuk setiap nama elemen atau pseudo-element.

Berpikir tentang tiga potongan kode berikut:

Contoh

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Judul</h1></div>
  • Spesifisitas A adalah 1 (satu elemen)
  • Spesifisitas B adalah 101 (satu referensi ID dan satu elemen)
  • Spesifisitas C adalah 1000 (gaya dalam baris)

Karena 1 < 101 < 1000, jadi aturan ketiga (C) memiliki spesifisitas yang lebih tinggi, jadi akan digunakan.

Aturan spesifisitas 1:

Dalam keadaan spesifisitas yang sama: aturan yang paling baru penting - Jika aturan yang sama ditulis dua kali di berkas gaya eksternal, aturan yang ditulis terakhir akan lebih dekat dengan elemen yang disesuaikan, jadi akan digunakan:

Contoh

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

Coba Sendiri

Aturan yang di tulis terakhir selalu digunakan.

Aturan spesifisitas 2:

Pemilih ID lebih spesifik daripada pemilih atribut - Lihat tiga baris kode berikut:

Contoh

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

Coba Sendiri

Aturan pertama lebih spesifik daripada dua aturan lainnya, jadi akan digunakan.

Aturan spesifisitas 3:

pemilih konteks lebih spesifik daripada pemilih elemen tunggal - gaya yang disisipkan lebih dekat dengan elemen yang disesuaikan. Jadi di keadaan berikut:

Contoh

Dari berkas CSS eksternal:

#content h1 {background-color: red;}

Dalam berkas HTML:

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

Atur rule berikutnya akan berlaku.

Aturan Khasitas 4:

Pemilih kelas akan mengalahkan pemilih elemen sejumlah - Pemilih kelas (seperti .intro akan mengalahkan h1, p, div dll):

Contoh

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

Coba Sendiri

Selain itu,Pemilih universal serta nilai yang diwarisi memiliki 0 - Khasitas * di * di body * serta yang sama memiliki 0. Khasitas yang diwarisi juga 0.