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

関連情報