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
Berapa skor kekhususan a[href="#"]
?
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
Manakah dari pemilih berikut yang bernilai 21 poin?
article:hover a[href]
article > section
article.card.dark
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
Manakah dari pemilih berikut yang merupakan 1-2-1
?
#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
li#specialty section.dark
section#specialty.dark
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.