Kekhususan

Podcast CSS - 003: Kekhususan

Misalkan Anda menggunakan HTML dan CSS berikut:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Ada dua aturan yang bersaing di sini. Satu tombol akan mewarnai tombol merah dan yang lain akan mewarnainya biru. Aturan manakah yang diterapkan pada elemen? Memahami algoritma spesifikasi CSS tentang kekhususan adalah kunci untuk memahami bagaimana CSS memutuskan di antara aturan yang bersaing.

Kekhususan adalah salah satu dari empat tahap yang berbeda dari jenjang ini, yang telah dibahas di modul terakhir, pada rantai.

Penilaian kekhususan

Setiap aturan pemilih mendapatkan skor. Anda dapat menganggap kekhususan sebagai total skor dan setiap jenis pemilih mendapatkan poin untuk skor tersebut. Pemilih dengan skor tertinggi akan menang.

Dengan kekhususan dalam proyek nyata, tindakan penyeimbangan adalah memastikan aturan CSS yang ingin diterapkan, benar-benar berlaku, sembari menjaga skor tetap rendah untuk mencegah kompleksitas. Skor seharusnya hanya setinggi yang kita butuhkan, alih-alih mendapatkan skor setinggi mungkin. Di masa mendatang, beberapa CSS yang benar-benar lebih penting mungkin perlu diterapkan. Jika Anda meraih skor tertinggi, Anda akan mempersulit pekerjaan itu.

Menilai setiap jenis pemilih

Setiap jenis pemilih akan mendapatkan poin. Anda menambahkan semua poin ini untuk menghitung kekhususan keseluruhan pemilih.

Pemilih universal

Pemilih universal (*) tidak memiliki kekhususan dan mendapatkan 0 poin. Artinya, aturan apa pun dengan 1 poin atau lebih akan menggantikannya

* {
  color: red;
}

Pemilih elemen atau elemen semu

Elemen (jenis) atau elemen semu pemilih mendapatkan 1 poin kekhususan .

Pemilih jenis

div {
  color: red;
}

Pemilih elemen semu

::selection {
  color: red;
}

Class, class semu, atau pemilih atribut

Class, pseudo-class atau Pemilih atribut akan mendapatkan 10 poin kekhususan.

Pemilih class

.my-class {
  color: red;
}

Pemilih class semu

:hover {
  color: red;
}

Pemilih atribut

[href='#'] {
  color: red;
}

:not() {i>pseudo-class<i} itu sendiri tidak menambahkan apa pun pada perhitungan kekhususan. Namun, pemilih yang diteruskan sebagai argumen akan ditambahkan ke penghitungan kekhususan.

div:not(.my-class) {
  color: red;
}

Sampel ini akan memiliki 11 poin kekhususan karena memiliki satu pemilih jenis (div) dan satu class di dalam :not().

Pemilih ID

ID pemilih mendapatkan 100 poin kekhususan, selama Anda menggunakan pemilih ID (#myID) dan bukan pemilih atribut ([id="myID"]).

#myID {
  color: red;
}

Atribut gaya sebaris

CSS diterapkan langsung ke atribut style elemen HTML, mendapatkan skor spesifikasi 1.000 poin. Ini berarti bahwa untuk menggantinya di CSS, Anda harus menulis pemilih yang sangat spesifik.

<div style="color: red"></div>

Aturan !important

Terakhir, !important di akhir nilai CSS mendapatkan skor kekhususan 10.000 poin. Ini adalah kekhususan tertinggi yang bisa didapatkan satu per satu.

Aturan !important diterapkan ke properti CSS, sehingga semua hal dalam aturan keseluruhan (pemilih dan properti) tidak mendapatkan skor kekhususan yang sama.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang penilaian kekhususan

Kekhususan dalam konteks

Kekhususan setiap pemilih yang cocok dengan elemen ditambahkan bersama. Pertimbangkan contoh HTML ini:

<a class="my-class another-class" href="#">A link</a>

Link ini memiliki dua class. Tambahkan CSS berikut, dan CSS tersebut akan mendapatkan 1 poin kekhususan:

a {
  color: red;
}

Merujuk ke salah satu class dalam aturan ini, kini memiliki 11 poin kekhususan:

a.my-class {
  color: green;
}

Tambahkan class lain ke pemilih, kini memiliki 21 poin kekhususan:

a.my-class.another-class {
  color: rebeccapurple;
}

Tambahkan atribut href ke pemilih. kini memiliki 31 poin kekhususan:

a.my-class.another-class[href] {
  color: goldenrod;
}

Terakhir,tambahkan class semu :hover ke semua itu, pemilih berakhir dengan 41 poin kekhususan:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang penilaian kekhususan

Memvisualisasikan kekhususan

Dalam diagram dan kalkulator kekhususan, kekhususannya sering divisualisasikan seperti ini:

Grup kiri adalah pemilih id. Grup kedua adalah pemilih class, atribut, dan class semu. Grup terakhir adalah pemilih elemen dan elemen semu.

Sebagai referensi, pemilih berikut adalah 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Menguji pemahaman Anda

Uji pengetahuan Anda tentang visualisasi kekhususan

Meningkatkan kekhususan secara pragmatis

Misalkan kita memiliki beberapa CSS yang terlihat seperti ini:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Dengan HTML yang terlihat seperti ini:

<button class="my-button" onclick="alert('hello')">Click me</button>

Tombol memiliki latar belakang abu-abu, karena pemilih kedua mendapatkan 11 poin kekhususan (0-1-1). Hal ini karena jenis ini memiliki satu pemilih jenis (button), yaitu 1 poin dan pemilih atribut ([onclick]), yaitu 10 poin.

Aturan sebelumnya—.my-button—mendapatkan 10 poin (0-1-0), karena memiliki satu pemilih class.

Jika Anda ingin meningkatkan aturan ini, ulangi pemilih class seperti ini:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Sekarang, tombolnya akan memiliki latar belakang biru, karena pemilih baru mendapatkan skor kekhususan 20 poin (0-2-0).

Skor kekhususan yang cocok menghasilkan kemenangan instance terbaru

Mari kita tetap dengan contoh tombol untuk saat ini dan alihkan CSS ke ini:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Tombol memiliki latar belakang abu-abu, karena kedua pemilih memiliki skor kekhususan yang identik (0-1-0).

Jika Anda mengganti aturan dalam urutan sumber, tombolnya akan menjadi biru.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Ini adalah satu-satunya kasus saat CSS yang lebih baru menang. Untuk melakukannya, elemen ini harus sesuai dengan kekhususan pemilih lain yang menargetkan elemen yang sama.

Resource

• Spesialisasi CSS
• Kalkulator Kekhususan
• Kekhususan MDN
• Informasi spesifik tentang Kekhususan CSS
• Kalkulator Kekhususan Lain