Selektori po srodstvu pri ugnježdenju SASS-a
Hajde da razmotrimo kako u SASS-u pri ugnježdenju dodati različite selektore koji biraju elemente po srodstvu. Pogledajte primere.
Primer
Dečiji (child) selektor:
div {
> p {
color: red;
}
}
Rezultat kompilacije:
div > p {
color: red;
}
Primer
Susedni (adjacent sibling) selektor
div {
+ p {
color: red;
}
}
Rezultat kompilacije:
div + p {
color: red;
}
Primer
Opšti srodnički (general sibling) selektor:
div {
~ p {
color: red;
}
}
Rezultat kompilacije:
div ~ p {
color: red;
}
Praktični zadaci
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
ul {
color: red;
> li {
padding: 20px;
}
}
Objasnite, kakav će biti rezultat kompilacije sledećeg koda:
div {
ul {
> li {
padding: 20px;
}
}
}
