選択してあるタブの文字色を変えたい。

Question

クリックで表示コンテンツを切り替えられるタブのメニューを作っているのですが、クリックした後（選択してあるタブ＜class="current"＞）の文字色を変えたいです。
hoverした時や、背景色は変えられたのですが、cssでcolorを指定してもなぜか反映されません。

あと、＜class="current"＞のついたタブはhoverしても変わらないようにしたいのですが・・・最初はできていたのですが色を変えたり色々いじっていたらいつのまにかhoverで反応するようになってしまいました。

何が原因なのでしょうか・・・。

<div id="navigation">
    <ul>
      <li><a href="#tab1" class="current">TOP</a></li>
      <li><a href="#tab2">PHOTOS</a></li>
      <li><a href="#tab3">LINK</a></li>
      <li><a href="#tab4">ABOUT ME</a></li>
    </ul>
  </div>

#navigation {
height:40px;
background-color:#BD923D;
margin-top:5px;
text-align: center;
}

#navigation ul{
  text-align: center;
  padding: 0;
}

#navigation li {
  list-style-type: none;
  line-height: 40px;
  float: left;
  width: 245px;
  box-sizing: border-box;
  border-right: #EDDAC0 2px solid;
}

.current{
  color: #825F2B; /*  ←これが反映されない */
	background:#FDF9F7;
}

#navigation a {
  font-size: 18px;
  display: block;
  text-decoration: none;
  letter-spacing: 3px;
  color: #fff;
}

ul li a:hover{
	background:#E6D09E;
}

#navigation li:last-child {
  border: none;
}

$(function() {

     $('#contents div[id != "tab1"]').hide();
     $("a").click(function() {
     $("#contents div").hide();
     $($(this).attr("href")).show();
     $($(this).attr("href")).children("div").show();
     $(".current").removeClass("current");
     $(this).addClass("current");
     return false;
     });


 });

Answer 1

CSSのセレクタには詳細度というものがあります。
詳細度に差がある場合、記述の順序に関係なく、詳細度が高いものの方が優先されてしまいます。

#navigation a{}

となっている場合、idセレクタの詳細度が高いためこちらのcolorが優先されます。

:hoverについても、今のままでは「ulの中のliの中のaが:hoverだったら」すべて色が変わってしまいます。
「currentがついていてかつ:hover」というセレクタで上書きをしてあげないといけませんね。

ul li a.current:hover{
    background:#E6D09E;
}

せっかくなので今後のために・・・

よくid＝100点、class=10点、要素（タグ）＝1点、みたいな説明がありますが、実際は
idの個数、classの個数、要素の個数でそれぞれカウントして、繰り上がることはありません。

もしidが2個、classが0個、要素が1個の場合は
201点のように思えますが、実は2.0.1となり、

idが1個、classが11個、要素が1個の場合は
211点ではなく1.11.1で負けるというわけです。

CSSのセレクタは記述が増えれば増えるほど混乱します。
この「セレクタの詳細度」はよく理解しておきましょう。

Comments

[yumi0414]

解決できました！
詳細度のことは考えていませんでした。
ありがとうございます。

Answer 2

たいていは

$("#navigation a").on("click", function() {
	$("#navigation a").removeClass("current");
	$(this).addClass("current");
});

のように 関連した項目からクラスを削除して、選択項目にクラスを追加する。
ノーテストのためタイポはごめんよ

そしてCSSはこうなる

#navigation a {
  font-size: 18px;
  display: block;
  text-decoration: none;
  letter-spacing: 3px;
  color: #fff;
}

#navigation a.current{
  color: #825F2B; /*  ←これが反映されない */
  background:#FDF9F7;
}