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 akan mewarnai tombol merah dan yang lain akan mewarnainya biru. Aturan mana yang diterapkan ke elemen? Memahami algoritma spesifikasi CSS tentang kekhususan adalah kunci untuk memahami cara CSS memutuskan antara aturan yang bersaing.

Kekhususan adalah salah satu dari empat tahap berbeda dari cascade, yang dibahas di modul terakhir, tentang cascade.

Pemberian skor kekhususan

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

Dengan kekhususan dalam project yang sebenarnya, tindakan penyeimbangan memastikan bahwa aturan CSS yang ingin Anda terapkan benar-benar diterapkan, sambil mempertahankan skor yang rendah untuk mencegah kompleksitas. Skor hanya boleh setinggi yang kami inginkan, bukan menargetkan skor setinggi mungkin. Di masa mendatang, beberapa CSS yang benar-benar lebih penting mungkin perlu diterapkan. Jika Anda mendapatkan skor tertinggi, Anda akan mendapatkan hasil yang berat.

Pemberian skor pada setiap jenis pemilih

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

Pemilih universal

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

* {
  color: red;
}

Pemilih elemen atau elemen semu

Pemilih elemen (jenis) atau elemen semu mendapatkan 1 titik kekhususan .

Pemilih jenis

div {
  color: red;
}

Pemilih elemen semu

::selection {
  color: red;
}

Pemilih class, kelas semu, atau atribut

Pemilih class, class semu, atau atribut mendapatkan 10 poin kekhususan.

Pemilih class

.my-class {
  color: red;
}

Pemilih class semu

:hover {
  color: red;
}

Pemilih atribut

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

Pseudo-class :not() itu sendiri tidak menambahkan apa pun ke penghitungan kekhususan. Namun, pemilih yang diteruskan sebagai argumen akan ditambahkan ke penghitungan kekhususan.

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

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

Pemilih ID

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

#myID {
  color: red;
}

Atribut gaya inline

CSS yang diterapkan langsung ke atribut style elemen HTML, mendapatkan skor kekhususan 1.000 poin. Artinya, 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 sebesar 10.000 poin. Ini adalah kekhususan tertinggi yang bisa didapatkan satu item individual.

Aturan !important diterapkan ke properti CSS, sehingga semua hal dalam aturan secara 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. Perhatikan contoh HTML ini:

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

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

a {
  color: red;
}

Mereferensikan salah satu class dalam aturan ini, aturan ini kini memiliki 11 titik kekhususan:

a.my-class {
  color: green;
}

Tambahkan class lain ke pemilih, yang kini memiliki 21 titik kekhususan:

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

Tambahkan atribut href ke pemilih, saat ini atribut tersebut memiliki 31 titik kekhususan:

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

Terakhir,tambahkan class pseudo :hover ke semua itu, pemilih akan mendapatkan 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, kekhususan sering divisualisasikan seperti ini:

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

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang kekhususan visualisasi

Meningkatkan kekhususan secara pragmatis

Katakanlah 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 memperoleh 11 poin kekhususan (0-1-1). Hal ini karena 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 kelas seperti ini:

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

button[onclick] {
  background: grey;
}

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

Skor kekhususan yang cocok memungkinkan instance terbaru menang

Mari tetap gunakan 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 identik (0-1-0).

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

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Ini adalah satu-satunya situasi ketika CSS yang lebih baru menang. Untuk melakukannya, itu harus sesuai dengan kekhususan pemilih lain yang menargetkan elemen yang sama.

Referensi

• Spesifikasi CSS
• Kalkulator Kekhususan
• Kekhususan MDN
• Detail Kekhususan CSS
• Kalkulator Kekhususan Lainnya