addClassとclickとdivの関係

Question

前提・実現したいこと

ピンク色のdivをクリックすると赤色になるようにしたいのですが、下記のコードでは何故動かないのでしょうか？

該当のソースコード

<div class="container">
<div></div>
<div></div>
<div></div>
</div>

.container {
  display: flex;
}

.container div {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.red {
  background-color: red;
}

$('.container div').click(function(){
  $(this).addClass('red');
});

Answer 1

jQueryをロードしていないか、セレクタの詳細度が.container divの方が.redより高いためです。

.red を修正する必要があります。

• セレクタをより詳細にする。例: .container div.red または
• !important を使う。 例: background-color: red !important;

Comments

[yukarichang]

また一つ勉強になりました！ありがとうございました

Answer 2

CSSの詳細度（セレクタの強さ）の問題です。

.container divは.redより詳細度が高いので、redのクラスを付けても.container div内のbackground-color: pink;のほうが適用されてしまいます。