Jawaban ini untuk pemula absolut. Jika Anda menginginkan gambaran umum dari jawaban ini, silakan baca jawaban kedua saya.
Cascading adalah proses menggabungkan stylesheet yang berbeda dan menyelesaikan konflik antara aturan dan deklarasi CSS yang berbeda ketika lebih dari satu aturan berlaku untuk elemen tertentu . Karena seperti yang Anda mungkin sudah tahu deklarasi untuk properti gaya tertentu seperti ukuran font dapat muncul di beberapa lembar gaya dan juga beberapa kali di dalam satu lembar gaya.
Untuk memahami cascading, Anda harus mulai dengan fase penguraian CSS karena dalam fase penguraian, langkah pertama adalah menyelesaikan deklarasi CSS yang bertentangan dan langkah kedua adalah memproses nilai CSS akhir.
Sekarang CSS juga dapat berasal dari berbagai sumber. Yang paling umum adalah CSS yang kami tulis oleh pengembang. Deklarasi ini yang kita masukkan ke dalam stylesheet kita disebut deklarasi penulis. Sumber lain dapat berupa deklarasi pengguna, yaitu CSS yang berasal dari pengguna. Misalnya, ketika pengguna mengubah ukuran font default di browser maka itu adalah CSS pengguna, dan yang terakhir adalah deklarasi browser default.
Misalnya, jika kita meletakkan tag anchor di HTML untuk sebuah link dan kemudian tidak menatanya sama sekali, biasanya akan ditampilkan dengan teks biru dan digarisbawahi, benar. Itu disebut CSS agen pengguna karena disetel oleh browser. Jadi kaskade menggabungkan deklarasi CSS yang berasal dari semua sumber yang berbeda ini, tetapi bagaimana kaskade sebenarnya menyelesaikan konflik saat lebih dari satu aturan diterapkan?
Nah, yang dilakukannya adalah melihat kepentingannya, pada spesifisitas pemilih, dan urutan sumber dari deklarasi yang bertentangan untuk menentukan mana yang diutamakan, dan berikut ini cara kerjanya. Pertama, kaskade dimulai dengan memberikan deklarasi yang bertentangan dengan kepentingan yang berbeda berdasarkan di mana deklarasi tersebut dideklarasikan pada sumbernya. Deklarasi yang paling penting adalah deklarasi pengguna yang ditandai dengan kata kunci penting.
Deklarasi terpenting kedua adalah deklarasi penulis yang ditandai dengan penting. Ketiga, deklarasi author normal, kemudian deklarasi pengguna normal, dan terakhir deklarasi yang paling tidak penting adalah deklarasi browser default, yang sebenarnya sangat masuk akal bahwa kita dapat dengan mudah menimpa deklarasi ini yang datang secara default dari browser.
Sekarang sering kali kita hanya memiliki sekumpulan aturan yang saling bertentangan di stylesheet penulis kita tanpa kata kunci penting. Itu sebenarnya skenario yang paling umum dan dalam kasus ini, semua deklarasi memiliki kepentingan yang sama persis. Sekarang, apa yang terjadi dalam kasus ini? Apa yang dilakukan cascade jika ini masalahnya adalah menghitung dan membandingkan kekhususan pemilih deklarasi, dan begitulah cara kerjanya.
Gaya sebaris memiliki kekhususan tertinggi diikuti oleh ID, lalu kelas, kelas semu, dan pemilih atribut, dan terakhir pemilih elemen paling tidak spesifik dan elemen semu. Jadi, ketika kita memiliki deklarasi yang bertentangan dengan kepentingan yang sama seperti yang kita lihat di slide terakhir, kita menghitung spesifisitas selektornya berdasarkan prioritas yang baru saja saya tunjukkan, tapi mari kita lihat bagaimana kita sebenarnya menghitung kekhususan dengan contoh kecil, itu selalu terbaik, benar.
Dari contoh di atas, semua deklarasi ini memiliki kepentingan yang sama, karena semuanya adalah deklarasi penulis. Jadi mari kita hitung kekhususan pemilih mereka untuk mengetahui apakah warna latar belakang akan menjadi biru, hijau, ungu, atau kuning, dan beginilah cara kita melakukannya. Kekhususan sebenarnya bukan hanya satu angka, tetapi satu angka untuk masing-masing dari empat kategori yang saya tunjukkan sebelumnya. Gaya sebaris, ID, kelas, pseudo-elemen dan atribut, dan akhirnya elemen dan untuk masing-masing, kami menghitung jumlah kemunculan di selektor.
Jadi di sini, di selektor satu, kami tentunya tidak memiliki gaya sebaris, karena gaya sebaris harus ditulis dalam HTML, yang tidak terjadi di sini, jadi nol. Kami juga tidak memiliki ID di sini, jadi sekali lagi nol, tetapi kami memiliki satu kelas, kelas tombol. Jadi untuk kategori kelas, kita punya satu, dan akhirnya, tidak ada pemilih elemen di sini jadi nol untuk yang itu juga, dan hanya itu. Kekhususan pemilih adalah nol, nol, satu, nol.
Sekarang, sekarang mari bandingkan dengan yang lain. Yang berikutnya juga bukan gaya sebaris, jadi nol untuk yang pertama. Sekarang di sini kita sebenarnya memiliki pemilih ID untuk nav ID, ya, jadi itu satu untuk ID. Kami juga memiliki dua kelas tarik kanan dan tombol jadi dua untuk kategori kelas, dan terakhir, ada juga dua pemilih elemen di sini. Elemen nav dan elemen div, yang artinya itu juga dua untuk kategori elemen. Jadi akhirnya kekhususan selektor adalah nol, satu, dua, dua, yang sebenarnya merupakan selektor yang sangat spesifik.
Pemilih nomor tiga sangat sederhana. Itu hanya pemilih elemen dan spesifisitasnya adalah nol, nol, nol, satu.
Sekarang yang terakhir, pemilih nomor empat. Pertama lagi kita punya nav ID, jadi ini satu untuk ID. Selanjutnya, kita memiliki kelas, kelas tombol, dan juga kelas semu, yaitu hover, yang menjadikannya dua untuk kategori kelas secara total. Karena ada juga satu pemilih elemen, spesifisitas akhirnya adalah nol, satu, dua, satu.
Sekarang mari kita tahu bagaimana sebenarnya kita menggunakan angka-angka ini untuk mengetahui pemilih mana yang berlaku. Kita mulai melihat angka dari kiri ke kanan dimulai dengan kategori yang paling spesifik, gaya sebaris. Jika ada pemilih dengan satu untuk gaya sebaris menang melawan semua pemilih lainnya, karena ini adalah kategori yang paling spesifik. Nah, ini tidak terjadi di sini, jadi mari kita lanjutkan ke ID. Kami melihat bahwa penyeleksi dua dan empat memiliki satu di sini sementara yang lain memiliki nol sehingga penyeleksi dengan nol keluar dari permainan karena mereka kurang spesifik maka penyeleksi dua dan empat yang memiliki ID.
Sekarang karena kedua penyeleksi memiliki satu dalam kategori ID, kita harus melanjutkan dan memeriksa kelas. Keduanya memiliki dua di kategori ini yang masih memiliki ikatan di antara mereka, dan akhirnya, di kategori elemen, pemilih dua memiliki dua sedangkan pemilih empat hanya memiliki satu dan jadi kami memiliki pemenang di sini. Selektor nomor dua adalah selektor paling spesifik dari semuanya dan akan memberikan tombol kita latar belakang hijau.34 Nilai pernyataan pemenang disebut nilai bertingkat karena ini adalah hasil dari kaskade.
Jadi kita mulai dengan sekumpulan nilai yang dinyatakan dalam hal ini biru, hijau, ungu, dan kuning salah satunya menang dan menjadi nilai bertingkat, yang dalam contoh kita hijau.
Sekarang bayangkan sektor empat juga memiliki dua elemen maka kedua penyeleksi dua dan empat akan memiliki kekhususan yang sama, benar. Jadi apa yang terjadi dalam kasus ini dan saya berjanji ini hampir selesai sekarang, oke. Nah jika masih ada seri pada saat ini maka deklarasi CSS terakhir yang tertulis dalam kode adalah yang akan diterapkan. Jadi sekali lagi jika semuanya sama, jika semua pemilih deklarasi memiliki kekhususan yang sama maka itu hanyalah deklarasi terakhir yang akan digunakan untuk memberi gaya pada elemen yang dipilih.