Combinator: Menargetkan Berdasarkan Posisi
Selector bisa digabung untuk menargetkan elemen berdasarkan hubungannya. Spasi berarti descendant — .kartu p memilih semua <p> di dalam .kartu, sedalam apa pun letaknya. Tanda > berarti child langsung — .menu > li hanya memilih li yang menjadi anak persis dari .menu, bukan cucunya. Ada juga + untuk saudara tepat setelahnya dan ~ untuk semua saudara sesudahnya. Menggunakan child selector membuat gayamu tidak bocor ke komponen bersarang, masalah yang sering muncul saat menu bertingkat mewarisi gaya yang tidak diinginkan.
👀 Contoh dulu
/* semua a di dalam nav, sedalam apa pun */
nav a { color: navy; }
/* hanya li yang anak LANGSUNG dari .menu */
.menu > li { font-weight: bold; }Hasilnya: Semua tautan di dalam nav menjadi biru tua, sementara penebalan hanya kena item tingkat pertama — sub-menu di dalamnya tidak ikut.
📝 Sekarang giliranmu
Beri warna #b91c1c hanya pada elemen <li> yang merupakan anak langsung dari .daftar, sehingga item di sub-daftar tidak ikut berubah.