入れ子構造におけるLESSの関係セレクター
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;
}
}
}
