Selectoren op verwantschap bij geneste SASS
Laten we bekijken hoe we in SASS bij het nesten verschillende selectoren kunnen toevoegen die elementen op basis van verwantschap selecteren. Bekijk de voorbeelden.
Voorbeeld
Child-selector (direct kind):
div {
> p {
color: red;
}
}
Compilatieresultaat:
div > p {
color: red;
}
Voorbeeld
Adjacent sibling-selector (aangrenzend broertje of zusje)
div {
+ p {
color: red;
}
}
Compilatieresultaat:
div + p {
color: red;
}
Voorbeeld
General sibling-selector (algemeen broertje of zusje):
div {
~ p {
color: red;
}
}
Compilatieresultaat:
div ~ p {
color: red;
}
Praktische opdrachten
Vertel wat het resultaat zal zijn van het compileren van de volgende code:
ul {
color: red;
> li {
padding: 20px;
}
}
Vertel wat het resultaat zal zijn van het compileren van de volgende code:
div {
ul {
> li {
padding: 20px;
}
}
}
