Cara bermain Rebutan Kursi
- Baca instruksi level. Arena menampilkan HTML yang tidak bisa diubah, isi
tema.css, hasil di browser, dan satu kursi untuk tiap elemen yang dinilai beserta warna tujuannya. - Tulis CSS-mu di editor. CSS-mu dimuat lebih dulu, lalu
tema.css, jadi kalau skornya seri, tema yang menang. - Tiap aturan yang mengenai elemen muncul sebagai kartu dengan skor id, kelas, dan tag. Pemenang duduk di kursi, yang kalah berdiri dengan alasannya, dan kolom skor yang membuatnya kalah ditandai.
- Aturan yang tidak mengenai elemen sama sekali tercantum di bawah kursi, jadi salah ketik nama kelas langsung kelihatan.
- Tekan Cek jawaban atau Ctrl + Enter. Yang dicek warna akhir tiap elemen di browser, bukan teks CSS-mu.
- Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.
Yang kamu pelajari
- Level 1
Kelas mengalahkan tag
Skor ditulis (id, kelas, tag).
pbernilai (0,0,1),.harga(0,1,0). - Level 2
Id mengalahkan kelas
Kolom id dibandingkan paling dulu. Satu
#promomenang dari berapa pun kelas. - Level 3
Menghitung skor
Jumlahkan tiap bagian selector, lalu bandingkan dari kiri: id, kelas, tag.
- Level 4
Selector gabungan dan keturunan
.harga.diskon(rapat) dan.kartu .harga(berspasi) sama-sama menjumlahkan semua bagiannya. - Level 5
Urutan sumber
Kalau skornya seri, aturan yang ditulis atau dimuat paling akhir yang menang.
- Level 6
:is()
Bernilai seperti argumen terkuatnya, walaupun yang cocok argumen yang lebih lemah.
- Level 7
:where()
Selalu bernilai nol, cocok untuk gaya dasar yang mudah ditimpa.
- Level 8
:not()
Isi kurungnya ikut dihitung seperti selector biasa.
- Level 9
Warisan
Warna yang diwarisi dari induk kalah dari aturan apa pun yang langsung mengenai elemen.
- Level 10
Atribut style dan !important
Atribut
stylemengalahkan semua selector. Hanya!importantyang bisa mengalahkannya dari CSS. - Level 11
!important lawan !important
Kalau dua aturan sama-sama
!important, skor dan urutan dibandingkan lagi seperti biasa.
Skor dibandingkan per kolom, bukan dijumlah
Specificity bukan angka seratusan. #menu .harga bernilai (1,1,0), sedangkan .a .b .c .d .e .f .g .h .i .j .k bernilai (0,11,0). Yang pertama tetap menang, karena kolom id dibandingkan dulu dan 1 lebih besar dari 0. Kolom kelas baru dilihat kalau kolom id seri.
Karena itu, menambah kelas tidak akan pernah mengalahkan id. Daripada berlomba skor atau memakai !important, turunkan skor aturan lawannya, misalnya dengan membungkus gaya dasar memakai :where().
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Selector dan properti apa saja yang dibaca?
Tag, *, #id, .kelas, :is(), :where(), :not(), spasi untuk keturunan, > untuk anak langsung, dan daftar selector dengan koma. Properti yang dibaca hanya color dengan nilai red, blue, green, orange, purple, atau gray, boleh diberi !important. Selector lain seperti :hover atau [atribut] dilewati.
Kenapa :is(#nav, .menu) dihitung punya id padahal elemennya tidak punya id?
Spesifikasi CSS menghitung :is() dan :not() dengan argumen terkuatnya, tidak peduli argumen mana yang cocok. Jadi :is(#nav, .menu) a selalu bernilai (1,0,1). :where() dibuat untuk kebalikannya: isinya tidak pernah menambah skor.
Kapan sebaiknya memakai !important?
Saat kamu tidak bisa mengubah sumber gaya yang harus dikalahkan, misalnya atribut style dari plugin atau CSS pihak ketiga. Untuk CSS milikmu sendiri, lebih rapi menurunkan skor aturan lain atau mengatur urutannya, karena !important hanya bisa dikalahkan oleh !important lain.
Bagaimana jawaban dicek?
Game memasang HTML level, CSS-mu, dan tema.css di pratinjau terpisah, lalu membaca warna akhir tiap elemen dengan getComputedStyle. Kartu skor dihitung oleh model kecil yang mengikuti aturan cascade yang sama, jadi jawaban yang berbeda bisa sama-sama benar.