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

Berapa skor kekhususan a[href="#"]?

1
a bernilai 1 poin, tetapi [href="#"] bernilai 10 poin.
5
Coba lagi.
11
a bernilai 1 poin dan [href="#"] bernilai 10 poin, sehingga menghasilkan total skor 11 poin.

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 > section
Elemen bernilai 1 poin, ada 2 elemen di pemilih, sehingga bernilai 2 poin.
article.card.dark
Elemen bernilai 1 poin, class bernilai 10 poin, dan dengan 2 class dan 1 elemen, maka pemilih ini bernilai 21 poin.
article:hover a[href]
Elemen bernilai 1 poin, kelas semu dan atribut bernilai 10 poin, ada 2 poin untuk elemen, dan 20 poin untuk atribut dan class, membuat pemilih ini bernilai 22 poin.

Memvisualisasikan kekhususan

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

Diagram yang menunjukkan pemilih yang paling spesifik untuk paling tidak spesifik

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?

section#specialty.dark
Pemilih ini divisualisasikan sebagai 1-1-1.
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
Pemilih ini divisualisasikan sebagai 1-3-0.
li#specialty section.dark
Pemilih ini divisualisasikan sebagai 1-1-2.

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