& 入れ子セレクターが間違って使われてた

前提

& 入れ子セレクターとは？

https://developer.mozilla.org/ja/docs/Web/CSS/Nesting_selector

本題

ざっくり言うと下記のようなコードでした。

<style>
  .parent {
    font-weight: bold;
    padding-bottom: 16;

    .child {
      color: orange;
    }

    &.child2 {
      /* parent child2みたいな使い方か、hoverの時に使う */
      color: blue;
    }

    & .child3 {
      color: green;
    }
  }
</style>

<div style="border: solid; width: 240px; padding: 8px;">
  <div class="parent">
    <div class="child"><div>Child 1</div></div>
    <!-- colorが適用されない↓ -->
    <div class="child2"><div>Child 2</div></div>
    <div class="child3">Child 3</div>
  </div>

  <!-- こっちは青くなる↓ -->
  <div class="parent child2">parent child2</div>
</div>

↓ブラウザで見た様子

&.child2の部分のセレクタの指定の仕方が違うようで、その部分のstyleが効いてませんでした。
上記の例では、文字が青くなってないです。

本当は、&. child2のように空白を開けたかったんだと推察しました。

&.child2のようにくっつけて使いたい場合は、<div class="parent child2">parent child2</div>のように使用すればstyleが適用されるようです。

今回利用したコードはこちら