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
Berapa skor kekhususan a[href="#"]
?
a
bernilai 1 poin, tetapi [href="#"]
bernilai 10 poin.a
bernilai 1 poin dan [href="#"]
bernilai 10 poin, sehingga total skornya adalah 11 poin.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
Manakah dari pemilih berikut yang bernilai 21 poin?
article > section
article.card.dark
article:hover a[href]
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
Manakah dari pemilih berikut yang merupakan 1-2-1
?
section#specialty.dark
1-1-1
.#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
1-3-0
.li#specialty section.dark
1-1-2
.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.