Селекторы по родству при вложенности SASS

Давайте рассмотрим, как в SASS при вложенности добавлять различные селекторы, выбирающие элементы по родству. Смотрите примеры.

Пример

Дочерний селектор:

div { > p { color: red; } }

Результат компиляции:

div > p { color: red; }

Пример

Соседний селектор

div { + p { color: red; } }

Результат компиляции:

div + p { color: red; }

Пример

Родственный селектор:

div { ~ p { color: red; } }

Результат компиляции:

div ~ p { color: red; }

Практические задачи

Расскажите, каким будет результат компиляции следующего кода:

ul { color: red; > li { padding: 20px; } }

Расскажите, каким будет результат компиляции следующего кода:

div { ul { > li { padding: 20px; } } }



Чат с GPT Компилятор