SCSSのhoverで特定の子要素の属性を変更する

親要素のマウスホバー時に、複数ある子要素のうち特定の子要素のみの属性を変更するという場面に遭遇しました。SCSSの書き方がなかなか見つからなかったので、備忘録も兼ねて記載します。

やりたいこと

以下のようなHTMLで、親要素contentにカーソルが当たった時の

• 子要素両方のテキストにアンダーラインを表示
• 2つ目の子要素については文字色を赤文字にする

を実装します。その際、

• BEMの考え方に則ったclassを設定する
• BEMに従い、&を活用した省略形でSCSSを記述する

ものとします。

sample.html

<div class="content">
  <p class="content__text">下線付き</p>
  <p class="content__text--red">下線付き＋赤文字</p>
</div>

sample.scss

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
}

元の表示はこんな感じ

##実装方法

親要素に：hover疑似クラスを適用

sample.scss

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
}

これで親要素にマウスカーソルが当たった時、テキストに下線が表示されます。親要素についての属性を設定していますが、子要素にも継承されるため、子要素のテキストに下線を付けることができます。
表示はこんな感じ。

2つ目の子要素のみの属性を変えるには？

CSSで書くとしたら以下のようになります。

.content:hover > .content__text--red {
  color: red;
}

ちなみに、「>」は「直下の子要素」を意味します。
※今回のサンプル程度であれば「>」の代わりに半角スペースでも同様の表示になります。

これをSCSSで書くと以下のようになります。

sample.scss

.content {
  height: 100px;
  width: 200px;
  border: solid 1px;
  text-align: center;
  &:hover {
    text-decoration: underline;
  }
  &:hover > &__text--red {
    color: red;
  }
}

&を使った省略形を1行に複数書けるということを今回初めて知りました。
表示はこんな感じ。

目的の実装ができました。

終わりに

JavaScriptを使わないとできないのかと思っていましたが、CSSのみで実現できました。どなたかの参考になれば幸いです。
初投稿なので読みづらい点もあったかと思います。読んでいただき、ありがとうございました。