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