【CSS】クラスでのスタイルの指定

全てサイズが同じメニューボタンを作成しました。
マウスオーバーでのオンオフをCSSで切り替えたく、画像もそれに合わせて作っています。（縦80×横100を2枚貼付けた、160×100のもの）

マウスオーバー時の動作は、
menu_a:hover {background-position: left bottom;}
という感じで書いており、きちんと動いたのですが、複数あるメニューボタン全てで同じ動きをするので、どうせならクラスを指定してまとめられないかと思い、各ボタンにclass="hover"のような指定をして、
.hover:hover {background-position: left bottom;}
のように書いたのですが、動かなくなりました。

同じように幅や高さも全て同じサイズになるので、
.hover {weight: 80px; height:100px;}
のように書いたのですが、こちらもスタイルが読み込まれませんでした…。

原因と対応方法がわかる方がいらっしゃいましたら、アドバイスをお願いします。

タグで指定しています。
<ul>
<li id="menu_a" class="hover">menu_A</li>
<li id="menu_b" class="hover">menu_B</li>
</ul>
という感じです。
指定方法が間違っているのでしょうか…。

IDで指定したものをクラスで上書きできないよ。

見逃していました、お返事が遅くなりすみません。

ID＞クラスで優先順位があるということだと思うのですが、ID名で指定していないスタイルはクラス名で指定したものを表示すると思っていましたが違うのでしょうか？
（上記では、IDでは背景画像の指定のみでクラスで幅や高さのスタイルを指定しており、そちらは適用されています）

IDを指定している場合、クラス名で疑似クラスは効かない、ということでしょうか…。
その場合、みなさんは全ID名を羅列している…のでしょうか。
なんだかとても無駄が多いように思えるのですが…。

メニューが2つに分かれておりまして…
メニュー①にはmenu_a、menu_b、メニュー②にはmenu_c、menu_dという感じで、どれもサイズや動作は同じ想定です。
なので、できればIDよりもクラスで指定をしたいなと思ったのですが…。

読み込まれない原因ってたいていは記述ミスだけどな。。。

こちらへは手書きで書いたので書き間違えました。
サイズはwidthで指定しています。

そうか〜記述ミスではなかったか〜。

ulにクラスを指定してみたのですが、ダメでした…。
positionの指定はしていないのですが、floatはさせています。
これが原因なのでしょうか…。

どこかに誤りがあるから正常に動かないわけで、トピ主が、誤りの可能性がある部分を出さない限り、解決しないね。

ID名で#menu_a:hover, #menu_b:hover {}という感じに記述すると正常に動くのですが、クラス名以外の原因は考えられるのでしょうか…。
ちなみに、floatを外してもダメでしたが、クラス名でwidthやheightを指定することはできました。

----- HTML -----
<ul>
<li id="menu_a" class="hover">menu_A</li>
<li id="menu_b" class="hover">menu_B</li>
</ul>
----- CSS -----
.hover { width: 100px; height:80px;}
#menu_a {background: url(menu_a.png) no-repeat top left;}
#menu_b {background: url(menu_b.png) no-repeat top left;}

ここまでは問題なく読み込まれています。
とりあえずはID名で羅列させて暫定的に対応しているのですが…。
他に原因となる部分が思い当たらず、困っています…。

CSSの書き順は？
#menu_a {background: url(menu_a.png) no-repeat top left;}
#menu_b {background: url(menu_b.png) no-repeat top left;}
.hover { width: 100px; height: 80px;}
.hover:hover {background-position: left bottom;}

前後関係でうまく行かない事あるよ。

CSSは、記述していただいたものと同じように、
.hover:hover {background-position: left bottom;}
を一番下に書いています。

いやこれ、IDのスタイルが優先されてるだけじゃないの？

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
}
#menu_a {
background-image: url(menu_b.png);
background-repeat: no-repeat;
}
.hover {
width: 100px;
height: 80px;
background-position: top left;
}
.hover:hover {background-position: left bottom;}

埋もれてしまったのにご回答ありがとうございます。。

つまり、IDを指定している場合、クラス名で疑似クラスは効かない、ということでしょうか…？
そういう時は、みなさんは全ID名を羅列して疑似クラスを適用させているのでしょうか？

#menu_a {
background: url(menu_a.png) no-repeat top left;
}

は、

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
}

の省略形なのはわかってる？

上の人も言ってるけど、IDで指定したものをクラスで上書きはできないから、

.hover:hover {
background-position: left bottom;
}

は反映されない。

お返事が遅くなりすみません。

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
}
は理解しています。

.hover { width: 100px; height: 80px;}
こちらも適用はされているので、#menu_aに対しては、

#menu_a {
background-image: url(menu_a.png);
background-repeat: no-repeat;
background-position: top left;
width: 100px;
height: 80px;
}
が適用されている、ということになりますよね？

上記では、IDで指定しているものでも、クラスのスタイルも適用されており、適用されていないのは疑似クラスのみ、となるので、IDを指定している場合はクラスは適用されるが疑似クラスは適用されない、ということだと思っていますが、認識が違いますでしょうか？

#menu_a.hover:hover、#menu_b.hover:hover
こういう書き方ならうまくいく。

下記だとトピ主の希望の動くだと思う。

<ul>
<li class="menu_a hover">menu_A</li>
<li class="menu_a hover">menu_B</li>
</ul>

.menu_a {
background: url(menu_a.png) no-repeat top left;
}
.menu_b {
background: url(menu_b.png) no-repeat top left;
}
.hover { width: 100px; height: 80px;}
.hover:hover {
background-position: left bottom;
}

IDでのposition指定に、classでのposition指定が負けてるだけかと。
widthとheightは、IDのほうに競合する記述がないですから。疑似クラス云々は関係ないと思います。
2014-07-11 · ID:FGf1d8YOW6mm の人が書いてくれた内容は試しましたか？

今の形のままいきたいなら、
.hover:hover {
background-position: left bottom !important;
}
にすれば動くと思いますよ。

優先順がID > クラスである事は理解されていると思いますが
同じ要素にIDとクラスを指定した場合も、同様の優先順になります。
つまり「#menu_a > .hover」という関係になるため、#menu_aに指定されたbackground-repeat: no-repeat;が反映されます。

#menu_a {} （IDのためこちらが優先）
.hover:hover {}（クラスだけではIDを上書き出来ない）

↓↓↓

#menu_a {}
#menu_a.hover:hover {}（ID＋クラスのため、IDのみの#menu_aを上書き）

↑ ミスってました。background-positionが反映、です

たくさんのご回答ありがとうございます。

＞0bJlznEjBImd様
#menu_a.hover:hover、#menu_b.hover:hover
こちらだと、確かに希望通りの動きをしてくれます。
ただ、同じ動きをさせるものなので、IDを羅列するよりはクラス名でまとめたいなと思ったのが事の発端でした。

＞RhgawKHeWzdX様
こちらにコメントしてくださった方法は全て試したのですが、!importantは失念しておりました。
!importantで試したところ、無事に表示させることができました。
ありがとうございます！

＞sX6Phg94h4az様
ご解説ありがとうございます。
IDで指定していたtop leftが残っていたのですね。
理解できました…ありがとうございます。

皆様、ご回答ありがとうございます。
おかげさまで、どこが間違っていたのか理解することができました。
お時間を割いてくださり、感謝いたします。

一度、#menu_aにwidth: 50px;を追加したら疑問が解決すると思う 。