The CSS Podcast - 003: Specificity
Misalkan Anda menggunakan HTML dan CSS berikut:
<button class="branding">Hello, Specificity!</button>
.branding {
color: blue;
}
button {
color: red;
}
Ada dua aturan yang menargetkan elemen yang sama di sini. Setiap aturan berisi deklarasi yang ingin menetapkan warna tombol: satu mencoba mewarnai tombol dengan warna merah dan yang lainnya mencoba mewarnai dengan warna biru. Deklarasi mana yang diterapkan ke elemen?
Memahami algoritma kekhususan CSS adalah kunci untuk memahami cara CSS memutuskan antara deklarasi yang bersaing.
Spesifitas adalah salah satu tahap yang berbeda dari kaskade, yang telah dibahas di modul terakhir, tentang kaskade.
Penskoran kekhususan
Setiap aturan pemilih dalam asal mendapatkan penskoran. Anda dapat menganggap spesifitas sebagai skor total dan setiap jenis pemilih akan memperoleh poin untuk skor tersebut. Deklarasi dari aturan dengan spesifitas tertinggi akan menang.
Dengan kekhususan dalam project nyata, tindakan penyeimbangan adalah memastikan aturan CSS yang Anda harapkan untuk diterapkan, benar-benar diterapkan, sementara secara umum menjaga skor tetap rendah untuk mencegah kompleksitas. Spesifisitas hanya boleh setinggi yang kita perlukan, bukan bertujuan untuk mendapatkan spesifisitas setinggi mungkin. Di masa mendatang, beberapa CSS yang benar-benar lebih penting mungkin perlu diterapkan. Jika Anda memilih spesifitas tertinggi, Anda akan mempersulit tugas tersebut.
Kekhususan bukan angka desimal, tetapi triad
yang terdiri dari tiga komponen: A
, B
, dan C
.
A
: spesifitas seperti IDB
: spesifitas seperti classC
: kekhususan seperti elemen
Ini sering direpresentasikan menggunakan notasi (A,B,C)
. Contoh: (1,0,2)
.
Notasi A-B-C
alternatif juga umum digunakan.
Membandingkan kekhususan
Spesifisitas dibandingkan dengan membandingkan ketiga komponen secara berurutan: spesifisitas dengan nilai A yang lebih besar lebih spesifik; jika dua nilai A sama, maka spesifitas dengan nilai B yang lebih besar lebih spesifik; jika dua nilai B juga sama, maka spesifitas dengan nilai C yang lebih besar lebih spesifik; jika semua nilai sama, kedua spesifitas tersebut sama.
Misalnya, (1,0,0)
dianggap memiliki spesifitas yang lebih tinggi daripada (0,4,3)
karena nilai A
di (1,0,0)
(yaitu 1
)
lebih besar dari nilai A
dari (0,4,3)
(yaitu 0
).
Pemilih memengaruhi kekhususan
Setiap bagian dalam triad spesifitas dimulai dengan nilai 0
,
sehingga spesifitas default-nya adalah (0,0,0)
.
Setiap bagian pemilih meningkatkan spesifitas yang, bergantung pada jenis pemilih,
akan menambah nilai A
, B
, atau C
.
Pemilih universal
Pemilih universal (*
)
tidak menambahkan kekhususan, sehingga nilainya tetap pada kekhususan awal (0,0,0)
.
* {
color: red;
}
Pemilih elemen atau pseudo-elemen
Pemilih elemen (jenis)
atau pseudo-elemen
menambahkan spesifikasi seperti elemen yang menambahkan komponen C
sebesar 1
.
Contoh berikut memiliki spesifitas keseluruhan (0,0,1)
.
Pemilih jenis
div {
color: red;
}
Pemilih pseudo-elemen
::selection {
color: red;
}
Pemilih class, pseudo-class, atau atribut
Pemilih class,
pseudo-class, atau
atribut menambahkan spesifikasi seperti class
yang menambahkan komponen B
sebesar 1
.
Contoh berikut memiliki spesifitas (0,1,0)
.
Pemilih class
.my-class {
color: red;
}
Pemilih pseudo-class
:hover {
color: red;
}
Pemilih atribut
[href='#'] {
color: red;
}
Pemilih ID
Pemilih ID
menambahkan spesifikasi seperti ID yang menambahkan komponen C
sebesar 1,
asalkan Anda menggunakan pemilih ID (#myID
) dan bukan pemilih atribut ([id="myID"]
).
Dalam contoh berikut, spesifitasnya adalah (1,0,0)
#myID {
color: red;
}
Pemilih lainnya
CSS memiliki banyak pemilih. Tidak semuanya menambahkan kekhususan.
Misalnya, pseudo-class :not()
sendiri tidak menambahkan apa pun ke penghitungan spesifitas.
Namun, pemilih yang diteruskan sebagai argumen akan ditambahkan ke penghitungan kekhususan.
div:not(.my-class) {
color: red;
}
Contoh ini memiliki spesifitas (0,1,1)
karena memiliki satu pemilih jenis (div
) dan satu class di dalam :not()
.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang penskoran spesifisitas
Apa kekhususan a[href="#"]
?
(0,1,1)
(0,0,1)
(0,1,0)
Faktor yang tidak memengaruhi spesifitas
Ada beberapa kesalahpahaman umum tentang faktor berikut yang memengaruhi spesifitas.
Atribut gaya sebaris
CSS yang diterapkan langsung ke atribut style
elemen,
tidak memengaruhi spesifitas karena merupakan langkah yang berbeda dalam cascade
yang dievaluasi sebelum spesifitas.
<div style="color: red"></div>
Untuk mengganti deklarasi ini dari dalam sheet gaya, Anda harus menggunakan cara untuk mendapatkan kemenangan deklarasi di langkah sebelumnya dari cascade.
Misalnya, Anda dapat menambahkan !important
ke dalamnya,
sehingga menjadi bagian dari asal !important
yang Dibuat.
Pernyataan !important
!important
di akhir deklarasi CSS tidak memengaruhi kekhususan,
tetapi menempatkan deklarasi dalam asal yang berbeda,
yaitu !important
yang Ditulis.
Dalam contoh berikut, kekhususan .my-class
tidak relevan agar
deklarasi !important
menang.
.my-class {
color: red !important;
color: white;
}
Jika dua deklarasi adalah !important
, maka kekhususan akan diterapkan lagi,
karena langkah asal dari kaskade belum dapat menentukan pemenang.
.branding {
color: blue !important;
}
button {
color: red !important;
}
Kekhususan dalam konteks
Saat pemilih kompleks atau gabungan digunakan, setiap bagian pemilih tersebut akan menambah kekhususan. Perhatikan contoh HTML ini:
<a class="my-class another-class" href="#">A link</a>
Link ini memiliki dua class.
Aturan dalam CSS berikut memiliki spesialisasi (0,0,1)
:
a {
color: red;
}
Jika Anda mereferensikan salah satu class dalam pemilih,
class tersebut kini memiliki spesialisasi (0,1,1)
:
a.my-class {
color: green;
}
Tambahkan class lain ke pemilih,
yang kini memiliki spesialisasi (0,2,1)
:
a.my-class.another-class {
color: rebeccapurple;
}
Tambahkan atribut href
ke pemilih,
yang kini memiliki spesialisasi (0,3,1)
:
a.my-class.another-class[href] {
color: goldenrod;
}
Terakhir,tambahkan pseudo-class :hover
ke semua itu, pemilih akan berakhir dengan spesifikasi (0,4,1)
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang penskoran spesifisitas
Manakah dari pemilih berikut yang memiliki spesifitas (0,2,1)
?
article.card.dark
article > section
article:hover a[href]
Meningkatkan kekhususan secara pragmatis
Misalnya, Anda 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 memiliki spesialisasi (0,1,1)
.
Hal ini karena memiliki satu pemilih jenis (button
),
yaitu (0,0,1)
dan pemilih atribut ([onclick]
), yaitu (0,1,0)
.
Aturan sebelumnya—.my-button
—sama dengan (0,1,0)
karena memiliki satu pemilih class, yang memiliki spesifitas lebih rendah daripada (0,1,1)
.
Jika ingin meningkatkan aturan ini, Anda dapat mengulangi pemilih class seperti ini:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Sekarang, tombol akan memiliki latar belakang biru,
karena pemilih baru mendapatkan spesifitas (0,2,0)
Kesamaan dalam kekhususan akan kembali ke langkah berikutnya dalam kaskade
Mari kita lanjutkan dengan contoh tombol untuk saat ini dan ubah CSS menjadi seperti ini:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Tombol memiliki latar belakang abu-abu,
karena kedua pemilih memiliki kekhususan yang sama yaitu (0,1,0)
.
Jika Anda mengalihkan aturan dalam urutan sumber, tombol akan berwarna biru.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
Hal ini karena kedua pemilih memiliki kekhususan yang sama. Dalam hal ini, kaskade akan kembali ke langkah urutan kemunculan.