Cara bermain Selektor Sniper
- Baca instruksi level. Elemen bergaris putus-putus di meja adalah target.
- Lihat kode HTML di bawah meja untuk tahu tag, class, id, dan atribut tiap elemen.
- Tulis selector. Elemen yang cocok langsung diberi garis oranye setiap kali kamu mengetik.
- Kalau garis oranye tepat menempel di semua target, tekan Cek jawaban atau Ctrl + Enter.
- Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
Selector tag
Nama tag memilih semua elemen dengan tag itu.
- Level 2
Selector class (.) dan id (#)
Titik memilih berdasarkan class, pagar memilih berdasarkan id.
- Level 4
Keturunan (spasi) dan anak langsung (>)
Spasi memilih semua keturunan,
>hanya anak satu tingkat di bawahnya. - Level 6
Saudara (+ dan ~)
+memilih satu elemen tepat setelahnya,~memilih semua saudara sesudahnya. - Level 8
Selector atribut
Kurung siku memilih berdasarkan atribut, mis.
[rasa="asam"]. - Level 9
:nth-child() dan :not()
Memilih berdasarkan urutan anak, atau membuang elemen yang cocok dengan selector lain.
- Level 11
Gabungan selector (,)
Koma menggabungkan beberapa selector, hasilnya semua elemen yang cocok dengan salah satunya.
Spasi dan > tidak sama
piring apel memilih setiap apel di dalam piring, sedalam apa pun letaknya. Apel di dalam kotak yang ada di piring ikut terpilih.
piring > apel hanya memilih apel yang induknya langsung piring. Apel di dalam kotak tidak ikut, karena induknya kotak.
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.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Jawaban dicek dari elemen yang terpilih, bukan dari teks selector. piring > apel dan meja > piring > apel bisa memilih elemen yang sama, jadi keduanya diterima kalau hasilnya tepat.
Kenapa selector saya dianggap tidak valid?
Browser menolak selector yang tanda bacanya tidak lengkap, misalnya kurung siku atau tanda kurung yang tidak ditutup, atau titik tanpa nama class. Periksa lagi bagian itu.
Apa beda :first-child dan :nth-child(1)?
Tidak ada. Keduanya memilih anak pertama dari induknya. :nth-child() lebih fleksibel karena bisa memilih urutan lain, seperti :nth-child(2) atau :nth-child(odd).
Apakah tag seperti piring dan apel ada di HTML sungguhan?
Tidak. Tag itu dibuat untuk game ini supaya mudah dibaca. Cara kerja selector-nya sama persis dengan tag HTML biasa seperti div, ul, atau li.