Nested Affinity Selectors in LESS
Let's look at how to add different selectors in LESS when nesting, selecting elements by relationship. See examples.
Example
Child selector:
div {
> p {
color: red;
}
}
Compilation result:
div > p {
}
Example
Neighbor selector
div {
+ p {
color: red;
}
}
Compilation result:
div + p {
}
Example
Related selector:
div {
~ p {
color: red;
}
}
Compilation result:
div ~ p {
}
Practical tasks
Tell me what the result of compiling the following code will be:
ul {
color: red;
> li {
padding: 20px;
}
}
Tell me what the result of compiling the following code will be:
div {
ul {
> li {
padding: 20px;
}
}
}
