スタイルシートで、id属性の中にclass指定をすることはできますか？

質問

CSSで、id属性の中にclass指定をすることはできますか？
現状は、divタグを使って、ヘッダー、メイン、フッターと分けているのですが、メインのところで
#main.hoge{
#main .hoge{
とも動きませんでした。なんとなく間違っている指定なのかなとはおもうのですが、id属性で細かく分けた中をclassで指定したい場合、単に.hogeで十分機能するのですが、id属性の中をclassで指定したい場合、皆様はどのようにされてみえるのでしょうか。

回答No.2

koutarou504 · ベストアンサー

#main01{background:#ffccff;}
.hoge01{background:#ffccff;}
#main02.hoge02{background:#ffccff;}
#main03 .hoge03{background:#ffccff;}

<div id="main01">
test-idMain01-可
</div>
<div class="hoge01">
test-classHoge01-可
</div>
<div id="main02" class="hoge02">
test-idMain02-classHoge02-可
</div>
<div id="main02">
<div class="hoge02">
test-idMain02-classHoge02-b-不可
</div>
</div>
<div id="main03" class="hoge03">
test-idMain03-classHoge03-不可
</div>
<div id="main03">
<div class="hoge03">
test-idMain03-classHoge03-b-可
</div>
</div>

で、可の処は背景色が付き不可の処は変化なしとなりますが・・・。
つまり、ご提示の件は共に動きますけれど・・・？？？

もしかして、継承とかの関係で指定した要素には影響は出ているけれど期待している要素まで指定が届いていないとか。
あるいは指定の優先度の問題で、他の指定が採用されていたり・・・。

あと、
#main.hoge{
こちらは、複数ページとか指定の重みとかの関係以外、
#main{
と、ほぼ同じですよ。
ID名はページ内では一意（同じ名前があってはいけない。）ですから。
で、指定の意味も同一のタグで ID名が main class名が hoge の物という事ですし。
ID名だけで特定できますから。

最後にご提示の件で私ならを。
私なら、class を別途作成し class だけで単独で指定しますが。
hoge01a hoge01b とか（実際は意味あるそれらしい名称で。）
分けたいと思う時点で別物という判断をします。
まぁそれ以前にほとんどの要素に個別に ID が振られたりしていますが・・・。(JavaScript も考慮の為。)

お礼

class を別途作成し class だけで単独で指定

でやってみます。ありがとうございました。

回答No.4

partita

できるできないの話は他の方に任せることにして、
私の場合、クラスとID属性は別個に記述します。

<div id="main" class="sub1">いろいろ</div>
#main {　　}
.sub1 {　　}

競合する属性は指定しません。
（両方にwidthを指定する、など。混乱の元になるので…）

お礼

そうですね。私もいつもそうしているのですけど、ちょっと気になりまして。
皆さんありがとうございました。

回答No.3

BLUEPIXY

>理屈的にはできるようなきがしますが。
FireFoxとＩＥでは、ちゃんと動作するようですが・

回答No.1

BLUEPIXY

<div id="main" class="hoge">適用範囲</div>
の場合
#main.hoge {
でいいはずですが・

<div id="main">
<div class="hoge">
適用範囲
</div>
</div>
の様に構成してあれば
#main .hoge{
で、id=mainの範囲で.hogeクラスを適用できます

補足

#main.hoge {
できないんですよね、なぜか。理屈的にはできるようなきがしますが。
もちろん、タグにつける
td.hoge{
などはできるんですけど。不思議です。。。