Pemilih Berdasarkan Hubungan dalam Nesting SASS
Mari kita lihat bagaimana menambahkan berbagai pemilih yang memilih elemen berdasarkan hubungan dalam nesting SASS. Lihat contoh-contohnya.
Contoh
Pemilih anak langsung (child selector):
div {
> p {
color: red;
}
}
Hasil kompilasi:
div > p {
color: red;
}
Contoh
Pemilih saudara berdekatan (adjacent sibling selector)
div {
+ p {
color: red;
}
}
Hasil kompilasi:
div + p {
color: red;
}
Contoh
Pemilih saudara umum (general sibling selector):
div {
~ p {
color: red;
}
}
Hasil kompilasi:
div ~ p {
color: red;
}
Tugas Praktis
Jelaskan bagaimana hasil kompilasi dari kode berikut:
ul {
color: red;
> li {
padding: 20px;
}
}
Jelaskan bagaimana hasil kompilasi dari kode berikut:
div {
ul {
> li {
padding: 20px;
}
}
}
