Давайте рассмотрим, как в LESS при вложенности добавлять различные селекторы, выбирающие элементы по родству. Смотрите примеры.
Пример
Дочерний селектор:
div {
> p {
color: red;
}
}
Результат компиляции:
div > p {
}
Пример
Соседний селектор
div {
+ p {
color: red;
}
}
Результат компиляции:
div + p {
}
Пример
Родственный селектор:
div {
~ p {
color: red;
}
}
Результат компиляции:
div ~ p {
}
Практические задачи
Расскажите, каким будет результат компиляции следующего кода:
ul {
color: red;
> li {
padding: 20px;
}
}
Расскажите, каким будет результат компиляции следующего кода:
div {
ul {
> li {
padding: 20px;
}
}
}