Banyak orang menemukan kompleks CSS. Mereka datang dengan berbagai alasan: tidak memiliki kemampuan untuk memahami CSS atau CSS itu sendiri. Tetapi kenyataannya adalah bahwa orang tidak menemukan waktu untuk benar-benar mempelajarinya. Jika Anda membaca artikel ini, Anda tertarik untuk belajar CSS dan itu bagus!
Apa itu kekhususan CSS?
Apakah Anda pernah menulis gaya, tetapi tidak berhasil, lalu Anda tambahkan
! Penting (atau tidak), namun tidak berhasil? Kemudian Anda melihat Devtools dan menyadari bahwa gaya lain tumpang tindih dengan Anda?
Ini adalah kekhususan CSS! Ini adalah bagaimana browser memilih mana dari pemilih yang bersaing untuk diterapkan pada elemen. Ketika browser melihat bahwa dua atau lebih penyeleksi cocok dengan elemen yang sama, dan penyeleksi memiliki aturan yang saling bertentangan, maka diperlukan cara untuk mencari tahu aturan mana yang berlaku untuk elemen ini. Cara ini terjadi disebut "nilai spesifisitas CSS".
Sebelum kita mempelajari kekhususan CSS, ingatlah hal-hal ini:- Kekhususan CSS hanya penting ketika banyak penyeleksi mempengaruhi elemen yang sama. Peramban perlu cara untuk mengetahui gaya mana yang berlaku untuk elemen yang sesuai ketika ada nilai properti yang saling bertentangan.
- Ketika dua atau lebih penyeleksi yang cocok memiliki nilai spesifisitas (berat) yang sama, browser memilih pemilih yang paling "terbaru" yang muncul lebih dekat ke bagian bawah daftar penyeleksi yang cocok. Paragraf berikut menjelaskan apa itu "daftar pemilih yang cocok".
- Browser membentuk "daftar penyeleksi yang cocok" dengan menggabungkan semua gaya pada halaman web dan memfilter yang tidak cocok dengan elemen "gaya saat ini" . Selektor pertama dalam stylesheet berada di bagian atas daftar, dan penyeleksi terakhir berada di bagian bawah.
- Properti style suatu elemen memiliki nilai spesifisitas yang lebih besar daripada penyeleksi dalam style sheet, kecuali ada ! Penting dalam pemilih style sheet.
- Menggunakan ! Penting (yang dianggap praktik buruk dalam beberapa kasus) mengubah kekhususan pemilih. Ketika dua penyeleksi memiliki spesifisitas yang sama, pemilih dengan ! Penting menang. Dan ketika keduanya memiliki ! Penting , pemilih "terbaru" menang.
Nilai spesifisitas
Sekarang kita bisa beralih ke cara browser menentukan spesifisitas pemilih.
Kekhasan pemilih dapat direpresentasikan sebagai string tiga digit yang dipisahkan oleh tanda hubung (atau apa pun): “2-4–1”. Digit pertama adalah jumlah pemilih ID yang ada, yang kedua adalah jumlah pemilih kelas, atribut dan pemilih kelas semu, dan yang ketiga adalah jumlah pemilih tipe dan elemen semu yang tersedia. Sebagai contoh:
#red.blue // 1-1-0 #green // 1-0-0 div.yellow#red // 1-1-1 .red.blue.yellow // 0-3-0
Definisi yang paling "spesifik"
Untuk menentukan pemilih mana yang lebih spesifik, Anda dapat membandingkan masing-masing dari ketiga nilai tersebut.
Katakanlah Anda memiliki
1-1-1 dan
0-3-0 , seperti pada dua contoh terakhir, dan Anda perlu menentukan mana yang memiliki kekhususan paling. Pertama Anda membandingkan nilai terakhir
1 dan
0 , dan dalam hal ini
1 menang. Ini berarti bahwa saat ini
div.yellow#red memiliki nilai spesifisitas yang lebih besar ... tetapi kami belum selesai membandingkan nilai-nilai tersebut.
Selanjutnya, bandingkan nilai
1 dan
3 ,
3 menang. Saat ini .red.blue.yellow memiliki nilai spesifisitas yang lebih besar.
Terakhir, kami membandingkan nilai pertama,
1 dan
0 , dan
1 menang, jadi
div.yellow#red lebih spesifik daripada
.red.blue.yellow .
Kekhususan CSS pemilih memberikan penjelasan yang baik tentang mengapa tidak ada jumlah pemilih kelas yang dapat menimpa pemilih ID.
Peringatan kecil
3 "jebakan" yang harus diperhatikan:- Saya menulis di atas bahwa angka kedua dalam urutan angka yang terdiri dari tiga adalah "jumlah pemilih kelas, pemilih atribut dan pseudo-kelas". Ini benar dalam semua kasus kecuali ketika itu
:not() pseudo-class. Ketika itu :not() kelas pseudo, kita tidak menganggapnya, tetapi mengabaikannya. Tetapi penyeleksi di dalamnya tidak diabaikan, mereka dianggap normal. - Kekhususan CSS memahami "bentuk" pemilih. Ini berarti bahwa ketika Anda memiliki
*[id="yellow"] dan #yellow , yang pertama diperlakukan sebagai pemilih atribut. - Selektor universal
* saja tidak dihitung terhadap kekhususan pemilih. Dalam paragraf [id="yellow"] atas, bagian dari pemilih adalah yang paling penting.
Saya harap artikel ini mudah dimengerti dan membantu untuk memahami apa itu kekhususan CSS. Sekarang Anda dapat melihat gaya dan dengan mudah menentukan seberapa "spesifik" itu.