特定クラスを除き、背景色を変えたい

Question

実現したいこと

フォーカス時、ラベル（Labelクラス）を除いた行全体の背景色を変えたい。

発生している問題

ラベルにフォーカスが当たると、ラベル背景色まで変わってしまう。
「Labelクラスを除く」指定をしたいが、それが分からない。

・フォーカス前

・行にフォーカス時

・ラベル上にフォーカス時

.div-link > .link{
    text-decoration: none; 
    color: #333;
    &:not(.label) :focus,:hover {
        background-color: $backColor;
    }
}

<ul class="vertical-posts">
        <li class="vertical-posts__item">
            <div class="div-link">
                <a class="link" href="#">
                    <div class="vertical-posts__header">
                        <p>事務局からのお知らせ</p>
                        <p><span class="label label-success fs14">キャンペーン</span>３時間前</p>
                    </div>
                    <!-- /.vertical-posts__header -->
                </a>
                <!-- /. a -->
            </div>
            <!-- /. div-link -->
        </li>
</ul>

試したこと

セレクタ指定が悪いかと思い、
.div-link > .link > .labelや
.div-link > .link > .vertical-posts__header >.label
など
:not(.label)の位置を変えたりしましたが、いずれも駄目でした。

先輩方教えて下さい。
宜しくお願いします。

Comments

[maisumakun]

SCSSを使っている、ということで間違いないですか？

[pecchan]

そうです。
すみません。
タグにscssが無かったのでcssにしました。

Answer 1

:notで.labelを除外すると考えるより、.labelの詳細度上げると考えた方が分かり安いと思います。

例えば、

.div-link > .link{
  text-decoration: none; 
  color: #333;
  & span.label {background-color: fuchsia; }
  & :focus,:hover {
    background-color: $backColor;
  }
}

:not を使うなら、

.div-link > .link{
  text-decoration: none; 
  color: #333;
  & .label {background-color: fuchsia; }
  & :not(.label):focus,:not(.label):hover {
    background-color: $backColor;
  }
}

Comments

[pecchan]

勉強になりました。有難う御座います！