Selectoren op verwantschap bij genesting LESS
Laten we bekijken hoe we in LESS bij genesting verschillende selectoren kunnen toevoegen die elementen selecteren op basis van verwantschap. Zie de voorbeelden.
Voorbeeld
Child selector:
div {
> p {
color: red;
}
}
Resultaat van compilatie:
div > p {
}
Voorbeeld
Adjacent sibling selector
div {
+ p {
color: red;
}
}
Resultaat van compilatie:
div + p {
}
Voorbeeld
General sibling selector:
div {
~ p {
color: red;
}
}
Resultaat van compilatie:
div ~ p {
}
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;
}
}
}
