Izbirniki sorodstva pri gnezdenju SASS
Oglejmo si, kako v SASS-u pri gnezdenju dodajati različne izbirnike, ki izbirajo elemente po sorodstvu. Poglejte primere.
Primer
Izbirnik otroškega elementa:
div {
> p {
color: red;
}
}
Rezultat prevajanja:
div > p {
color: red;
}
Primer
Sosednji izbirnik
div {
+ p {
color: red;
}
}
Rezultat prevajanja:
div + p {
color: red;
}
Primer
Izbirnik sorodnega elementa:
div {
~ p {
color: red;
}
}
Rezultat prevajanja:
div ~ p {
color: red;
}
Praktične naloge
Povejte, kakšen bo rezultat prevajanja naslednje kode:
ul {
color: red;
> li {
padding: 20px;
}
}
Povejte, kakšen bo rezultat prevajanja naslednje kode:
div {
ul {
> li {
padding: 20px;
}
}
}
