jQueryのtoggleClassで、追加したCSSは、追加前のCSSを使えないのか。

Question

実現したいこと

ハンバーガーメニューを作成中です。
元のCSSのbackground-color:red;を
jQueryで追加したCSSで、background-color:blue;に
したいのですが、どうすれば実現できるのでしょうか。
画面を隠したり出したりするleft -100％を、left 0％にできません。

元と追加後で、同じタグを変更できません。

元のCSSにないタグは、書くと動きます。

ご回答よろしくお願いします。

Answer 1

jQuery の css() (中身は HTMLElement.style) によるインラインスタイル設定はやめて、すべてクラスセレクタや id セレクタでスタイルシートからスタイルを指定してください。

CSSの仕様で、インラインスタイルはスタイルシートより常に優先されます。

Comments

[iceforest]

回答ありがとうございます。
こんな稚拙な質問に答えていただいて嬉しいです。
ありがとうございます。

Answer 2

CSSは基本は後に記述したものが適用されます。(ただし、セレクターの詳細度が同じ場合)
セレクターの詳細度が異なる場合は、記述した位置に関係なく詳細度が高いものが適用されます。

詳細度 - CSS: カスケーディングスタイルシート | MDN

ということで、toggleClassで追加されるクラスセレクターを後に記述するか、詳細度を上げるようにすればいいでしょう。

<div class="hamburger">
</div>

$(function() {
  $(".hamburger").click(function() {
    $(".hamburger").toggleClass("blue");
  });
});

記述する位置を後にする場合のCSSサンプル

.hamburger {
  width: 100px;
  height: 100px;
  background-color: red;
}
.blue {
  background-color: blue;
}

詳細度を上げる場合のCSSサンプル

.hamburger.blue {
  background-color: blue;
}
.hamburger {
  width: 100px;
  height: 100px;
  background-color: red;
}

Comments

[iceforest]

回答ありがとうございます。
優先順位に気を付けてコーディングしてみます。
ありがとうございます。