Kekhususan

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 ID
  • B: spesifitas seperti class
  • C: kekhususan seperti elemen

Ini sering direpresentasikan menggunakan notasi (A,B,C). Contoh: (1,0,2). Notasi A-B-C alternatif juga umum digunakan.

Diagram yang menunjukkan tiga komponen spesifitas (A,B,C). Untuk setiap komponen, diagram menunjukkan apa yang diwakilinya dan beberapa contoh pemilih yang memengaruhinya.
Diagram yang menunjukkan komponen spesifitas yang terpengaruh oleh berbagai pemilih.

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,0,1)
a bernilai (0,0,1), tetapi [href="#"] bernilai (0,1,0).
(0,1,0)
Coba lagi. a bernilai (0,0,1), tetapi [href="#"] bernilai (0,1,0).
(0,1,1)
a bernilai (0,0,1) dan [href="#"] bernilai (0,1,1), sehingga total spesifitasnya adalah (0,1,1).

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 > section
Elemen menambahkan kekhususan seperti elemen (komponen `C`). Ada 2 elemen dalam pemilih, sehingga memiliki spesifitas (0,0,2).
article.card.dark
Elemen menambahkan kekhususan seperti elemen (komponen `C`) dan class menambahkan kekhususan seperti class (komponen `B`). Dengan 2 class dan 1 elemen, pemilih ini memiliki kekhususan (0,2,1).
article:hover a[href]
Elemen menambahkan kekhususan seperti elemen (komponen `C`), pseudo-class, dan atribut menambahkan kekhususan seperti class (komponen `B`). Ada 2 pemilih elemen (2 × (0,0,1)), pemilih atribut (bernilai (0,0,1)), dan pemilih class (bernilai (0,0,1)). Hal ini membuat pemilih ini memiliki total spesifitas (0,2,2).

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.

Resource