CSS 入れ子と詳細度
& 入れ子セレクターの詳細度は、関連するセレクターリストの中で最大の詳細度を使用して計算されます。これは、 :is() 関数を使用した場合の詳細度の計算方法と同じです。
html
<b class="foo">
<i>青いテキスト</i>
</b>
& 入れ子構文
css
#a, b {
& i {
color: blue;
}
}
.foo i {
color: red;
}
:is() 構文
css
:is(#a, b) {
& i {
color: blue;
}
}
.foo i {
color: red;
}
この例では、 id セレクター (#a) の詳細度は 1-0-0 になり、要素型セレクター (b) の詳細度は 0-0-1 になります。入れ子セレクター と :is() 擬似クラスはどちらも、 #a という id セレクターを使わなくても詳細度は 1-0-0 になります。
.foo クラスセレクターの詳細度は 0-1-0 です。これにより、 & i の詳細度の合計は 1-0-1 となり、 .foo i の詳細度は 0-1-1 となるので、 color: blue; が勝ちます。