Materi
Selektor tipe, kelas, id, dan keturunan sudah cukup untuk halaman kecil. Halaman toko butuh lebih: tautan yang menuju berkas PDF, baris tabel genap, atau semua kartu kecuali yang stoknya habis, tanpa menambah kelas di setiap elemen.
Selektor atribut ditulis di dalam kurung siku. [href] memilih elemen yang punya atribut href. [type="email"] memilih yang nilainya persis email. [href^="https"] memilih nilai yang diawali https, [href$=".pdf"] yang diakhiri .pdf, dan [href*="wa.me"] yang memuat teks itu di mana saja.
a[href$=".pdf"] { font-weight: bold; } /* tautan berkas PDF */
tbody tr:nth-child(even) { background: #f1edfa; } /* baris 2, 4, 6 */
.produk:not(.habis) { border-color: #5a3fb0; } /* semua kecuali yang habis */
nav > ul > li { display: inline-block; } /* menu tingkat pertama saja */
h2 + p { margin-top: 0; } /* paragraf tepat sesudah h2 */:nth-child() memilih elemen menurut urutannya di antara saudara-saudaranya. odd memilih urutan 1, 3, 5, even memilih 2, 4, 6, dan rumus seperti 3n memilih setiap urutan ketiga. :not() membalik pilihan: .produk:not(.habis) memilih semua kartu produk yang tidak berkelas habis.
Kombinator anak > lebih ketat daripada spasi. ul > li hanya memilih li yang menjadi anak langsung ul, bukan li di dalam daftar bersarang. Kombinator + memilih elemen yang tepat mengikuti elemen lain di induk yang sama. Pseudo-elemen ::before menyisipkan kotak sebagai anak pertama elemen dari nilai properti content; MDN mengingatkan isinya tidak selalu dibacakan pembaca layar, jadi pakai hanya untuk hiasan.
