スタイルシート/idの入れ子でid？

質問

以下のようなCSSがあったとして、上の「#cHead」はうまくいったのですが、その後の応用がわかりません。たとえば、最後の「#cWeek」などは、反映されず、「#cHead」のテキスト位置とフォントサイズ、太さなどが反映されてしまいます。
html部分では、「#cWeek」はdivで「#cHead」でに囲まれています。
#cHeadの中に別のスタイルシートを設定するにはどうしたらよろしいでしょうか？

#cHead {width:outo;
text-align: center;
font-size: 10pt;
font-weight: bold;
　　 background: #FFFFFF url(/img/bg.gif) repeat-x top;
border: 1px solid #C4DCFA;}
#cWeek {font:#ff0000;}
-----------------------------------------------------

【html部分】
<div id="cHead">
カレンダー
<div class="cWeek">
日月火水木金土
</div>
</div>

回答No.1

Tacosan · ベストアンサー

下は class をセレクタに使ってるから
.class { ... }
と指定しないとダメなんじゃないかなぁ?

参考URL：

http://www.w3.org/TR/CSS1#class-as-selector

回答No.5

NTJ

っていうか・・・
　id : 一つのHTML内で一箇所のみ許される
　class ： 多数の項目で使用できる
なので・・・

<style>
.cHead {　　　←id指定からclass指定へ変更
width:auto;　←スペルミス修正
text-align:center;
font-size:10pt;
font-weight:bold;
background:#FFFFFF url(/img/bg.gif) repeat-x top;
border: 1px solid #C4DCFA;
}
.cWeek {
color:#ff0000;
}
</style>

<div class="cHead">
カレンダー
<div class="cWeek">
日月火水木金土
</div>
</div>

このほうが良くないでしょか？
id指定 class指定混在させると、結局自分が訳わかんなくなっちゃいますから。
それにclass指定のみなら、カレンダーを複数に増やしたい場合にも、そのまま再利用できますからねぇ。

＃・・・世の指南サイトでid指定が幅を利かせてるのは、ど～ゆぅ訳なんだろう・・・？

回答No.4

partita

後に書いたものが反映される、というわけではありませんよ。

#cHead .cWeek {font:#ff0000;}

と書いたら解決しませんか？

【原理】
#cHeadと.cWeekでは、font属性が競合しています。この場合、ID属性のほうがCLASS属性よりも優先されます。
もしも
#cHeadと#cMainのように両方ともID属性であれば後に書かれたものが反映されます。

詳しくは調べてみてね。

回答No.3

yambejp

×#cWeek {font:#ff0000;}
○.cWeek {color:#ff0000;}

ってこと？

回答No.2

noname#65286

スタイルシートのお約束違反ですね
#abc　・・・　id="abc" とした場合適用されます。本来はページの中で1回だけ使用できます。
.def　・・・　class="def" とした場合適用されます。ページの中で複数回使用することができます。

質問の内容では、idで定義したスタイルをclassで適用しているので反映されません

補足

#cWeek {font:#ff0000;}
の部分は私の写し間違いでした。
「.」に変えてもいかなかったので、「#cHead」の囲いの
外側に出してみたら、反映されました。
結局「#cHead」の中では「.cWeek」は反映されなかったのですが…