Selektor dan cascade
Pilih elemen yang tepat dan pahami aturan yang menang.
Pahami konsepnya
Selektor menentukan elemen yang menerima gaya. Kelas dapat dipakai ulang. Bila dua aturan mengatur properti yang sama, kekhususan selektor dan urutan aturan menentukan hasilnya.
Selektor dasar ada tiga: berdasarkan tag (p menimpa semua paragraf), berdasarkan class (.kartu menimpa semua elemen berkelas kartu), dan berdasarkan id (#judul menimpa satu elemen unik). Selektor bisa menggabung dan menumpuk: .kartu p hanya menimpa paragraf di dalam elemen berkelas kartu — makin spesifik, makin kuat.
Cascade menjawab pertanyaan "kalau dua aturan bertabrakan?": yang lebih spesifik menang; bila sama spesifiknya, yang ditulis belakangan menang. Urutan kekuatannya kasar begini — tag < class < id, dan inline style di atribut lebih kuat lagi. Memahami tangga ini menjelaskan hampir semua kejanggalan "kenapa gayaku tidak jalan".
Coba contoh kode
p { color: #596970; }
.kartu { color: #263744; }
.kartu strong { color: #c7603e; }Teks pada .kartu mengikuti warna kartu. Elemen strong di dalamnya memakai warna aksen karena aturan yang lebih khusus.
Latihan singkat
Buat kelas .note dengan warna latar lembut, lalu terapkan pada satu paragraf.