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; が勝ちます。

関連情報