CSSで、DIV#hogeという記述は何の意味を表しますか？

質問

CSSファイルで、

DIV#hoge {
xxxxxxxxxxx;
}

と書かれているものがありますが、この「DIV#」とは何でしょうか？
YahooでもGoogleでも「DIV#」とか「DIV#とは」とかで検索するのですが、珍しくヒットしません・・・・

普通なら、
div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば
.hogeと書くと思いますが、DIV#hogeというのは何のことでしょうか？

回答No.7

leap_day · ベストアンサー

こんにちは

まだ少し困惑されてる部分があるようなので補足入れておきます

先ほど挙げた
<div id="hoge">&nbsp;</div>
<p id="hoge">&nbsp;</p>
は『仮に』ですので実際には同じページでこのような使い方はしません(多分これは理解されてると思いますが）

そのページだけのスタイルシートであればidはひとつだけですので
#hoge { *** }
で事足ります

ですがスタイルシートを外部ファイルにして複数のページで読み込んだとしましょう
その際idの付け方を迷ってこっちのページでは<div id="hoge">としたが別のページでは<p id="hoge">とつけてしまったら同姓同名のhogeさんができます
そうした場合 #hoge { } ではdiv hogeさんもp hogeさんも同じスタイルシートが適応されますが div#hoge { } とすることでdiv hogeさんだけ・・という指定が可能になります

また同一ページで行う場合(class指定)ではclass="hoge"で複数のスタイルシートを指定してその中の一部だけ他とは別にしたいというときにも使用できます
<style type="text/css"><!--
.hoge {
color:blue;
background-color:red;
width:800px;
}
h2.hoge {
width:400px;
}
--></style>
<div class="hoge">サンプル</div>
<h2 class="hoge">サンプル</h2>
<p class="hoge">サンプル</p>

また#4で困惑されているのは div#hoge とdiv #hoge と半角スペースの有る無しでまったく別のものを指定することになるからです
div#hoge
　→　<div id="hoge">のことを指定
div #hoge
　→　<div>
　→　<** id="hoge">のことを指定(タグは何でも良い)

お礼

いつも本当に有難うございます<(_ _)>

なるほど、そのような二つのケースで少なくとも必要性が出てくるということですね！
特に間違って同姓同名の名づけをした場合におかしくなってしまうというお話には大きな気づきを頂きました<(_ _)>
確かに、記述が多くなればなるほど、名づけていないつもりが間違って同じ名前をつけてしまう可能性が出てくるというわけですね。
そのような間違い防止にもなるというのは便利ですね！

> また#4で困惑されているのは div#hoge とdiv #hoge と半角スペースの有る無しでまったく別のものを指定することになるからです

何と、半角スペースがあったとは・・・
それでだったんですね。これまた全く意味が違いますね！

誠にありがとうございました！

回答No.8

abril

前回スルーせよ、と言われましたがまあ、回答するのもこちらの自由ですので。
また、ここは「有用な」データベースとして共有するものなのですから、あまりにも不勉強な質問を繰り返されることは利用者全体の利益にならないと思いますので。

> 普通なら、
> div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば
> .hogeと書くと思いますが、DIV#hogeというのは何のことでしょうか？

何をもって「普通」と断定していますか？今までの質問の経過を見れば、明らかに質問者様はまだまだCSSのシンタックスを理解していないレベルですのに。「結果として同じ事」を実現する方法は、1つとは限りません。制作者それぞれの考え方に基づいて、（正しいシンタックスの範囲内で）記述方法も違って当然です。

今での回答者様の仰る通り、<div id="hoge">とマークアップされているブロック（更に、<div>以外のタグに対してこのidが使用されていないという条件も含む）に対しての定義の仕方は、単に"#hoge"と記述しても"div#hoge"と記述しても同じです。そのどちらを選ぶかは、そんなことは制作者の自由です。どちらが「普通」とか「普通じゃない」とか決めつける様な問題ではありません。

後者"div#hoge"の様な記述を採用している理由ですが、一例として。「<div>病」にかかってない制作者でありデザイン的に可能なら、コラムレイアウトなどコンテンツの大枠を作る際に<div>以外のタグも併用して組み上げる事もできます。
<div id="HEADER">ヘッダー</div>
<ul id="LEFTNAVI">レフトナビ</ul>
<div id="MAIN">メイン</div>
<p id="FOOTER">フッター</p>
上記はレイアウトの大枠を定めるコンテナブロックですので、各idは他の箇所のマークアップに適用されることはありません。質問者様の「普通」と仰る考え方で行けば、CSSでは"#HEADER""#LEFTNAVI""#MAIN""#FOOTER"と記述すれば済む話でしょう。しかし、制作者としては「このidを適用している部分のマークアップについてCSSでも明示的にしておきたい」という様に考える事もあるのです。上記の様に、<div>ではないマークアップも混在している場合などはそうしておいた方が把握しやすいですし、仮にこれが全て<div>でマークアップされていたとしても、やはり"div#HEADER"という記述で統一しておきたい、という思考で制作されていたとしても何も「普通ではない」事はありませんよ。

> 検索君、もう少し頑張ってくれ～～^^;

検索サイトのせいにするのはお門違いというものです。例え「#」のせいでサーチ・エンジンでそのものずばりがヒットしなかったとしても、頭を切り換えてCSSのシンタックスを解説したサイトを訪れてみればいいでしょう？そんなサイト、山ほどあるのですから。まずそういうところへ訪れて最初からきちんと読みこなしていけば、必ず「この「DIV#」とは何でしょうか？」という疑問は解けた筈です。
というか、

> なので、CSSファイルの方で「div#hoge」と書く意味がどうにもわかりません。

これだけ各回答者様がわかりやすく説明しても理解できない様であれば…いや理解できない、というより（今までの各スレッドでのやりとりを見ていても）「ご自分の独断の考え方に固執している（他のやり方が納得できない）」という姿勢を感じてしまいます。そういう態度ではいくら教えを乞うても知識を正しく「吸収」することは難しいと思います。前にも言いましたが、質問者様は「クライアントの為に制作を請け負う”プロ”」なのでしょう？あれこれここで付け焼き刃的な質問を繰り返す前に、せめてCSSの解説本の一冊なり読みこなすなりして下さい。今まで繰り返された質問の根本的な問題のほとんどは、CSSのシンタックスさえきちんと理解していれば解決していた事ばかりでので。

お礼

いつもありがとうございます<(_ _)>

> 制作者としては「このidを適用している部分のマークアップについてCSSでも明示的にしておきたい」という様に考える事もあるのです。

なるほど！　明示的というのは、後でCSSファイルを見るときにパッと見つけられるように印をしたい、ということと理解しました。
HTMLファイルにも同じように印をつけたりしますし、なるほどです！

自分の独断の考え方に固執、というのはとんでもないです。そんなことは思うはずがありません。
それこそ教えていただいたことを取り入れて取り入れて作業しているんです。
意味がわからなかったことに再質問することはあっても、固執なんてとんでもないことです。

回答No.6

yambejp

一般的にはidは文書内ではユニークなので#hoge{}で十分です。

ただし、cssを外部ファイル化しているとき、
a.htmには<div id="hoge">・・・</div>という箇所があり、
b.htmには<span id="hoge">・・・</span>という箇所があった場合
a、bともにおなじcssファイルを参照していれば、
a.htmにのみcssを反映させることができます。

お礼

どうもありがとうございます。
なるほど、基本的には#hoge{}で十分ということは間違っていないのですね。
ただし別のHTMLにdivでなくspanで同じhogeを使っている場合などにこのようにする意味が出てくるんですね！

回答No.5

918BG

＞この「DIV#」とは何でしょうか？

その文書中に登場するDIV達の中で、特定のid名を持つDIVだけに働きかけるための指定です。

＞普通なら、
div idをつくりたいならば、#hogeと書きますし、div classをつくりたいならば
.hogeと書くと思いますが、

ちょっと違います。div idを作りたい時には、
<div id="hoge">中身</div>
と書きますし、div classを作りたい時には、
<div class="hoge">中身</div>
と書きます。
クラスというのは全体の中である特徴をもったものをまとめた集団のことですし、idとは識別とか特定といった意味のアイデンティファイを略した特定の個体を意味します。
「その人らしさ」をアイデンティティーとも言いますよね。

わかりやすくするために、たとえ話で説明させて下さい。たとえばご質問にある

DIV#hoge {
xxxxxxxxxxx;
}

上記をもとに、先生が騒がしい生徒達を静かにさせる例を考えてみます。
xxxxxxxxxxx;というのを、「静かにさせる」という指定だとします。

DIV {
xxxxxxxxxxx;
}
と指定すると、先生が学校中の全部の生徒を静かにさせることになります。

DIV.hoge {
xxxxxxxxxxx;
}
と指定すると、先生がひとつのクラスの生徒(40数人かな)だけを静かにさせることになります。

DIV#hoge {
xxxxxxxxxxx;
}
と指定すると、先生が特定の生徒(ここではhogeくん)だけを静かにさせることになります。

詳しくは、下記参考URLをご覧下さい。
参考URL　DIV要素の説明
http://www5.wisnet.ne.jp/~z-plus/hp/html40/div.html

なお、「DIV#」とか「DIV#とは」とかで検索してみてもヒットしませんね。これは、「#」の文字が検索キーワードとしては不適当なので、検索エンジンが自動的に取り除いているからだと思われます。想像ですが、おそらく「#」の文字が検索エンジンの内部データ処理に使われていて、キーワードの一部に含まれていると、その部分で演算ミスがおきてしまうからでしょう。

お礼

詳しくどうもありがとうございます<(_ _)>

> ちょっと違います。div idを作りたい時には、
> <div id="hoge">中身</div>
> と書きますし、div classを作りたい時には、
> <div class="hoge">中身</div>
> と書きます。

あっ、いえいえこれはCSSファイルの話です。HTMLじゃないです。

> 上記をもとに、先生が騒がしい生徒達を静かにさせる例を考えてみます。
> xxxxxxxxxxx;というのを、「静かにさせる」という指定だとします。

> DIV {
> xxxxxxxxxxx;
> }
> と指定すると、先生が学校中の全部の生徒を静かにさせることになります。
>
> DIV.hoge {
> xxxxxxxxxxx;
> }
> と指定すると、先生がひとつのクラスの生徒(40数人かな)だけを静かに> > させることになります。
>
> DIV#hoge {
> xxxxxxxxxxx;
> }
> と指定すると、先生が特定の生徒(ここではhogeくん)だけを静かにさせることになります。

わかりやすいですね！
ところでdiv#hogeとdiv.hogeのところは書き間違いだと理解しました。
「#(id)」のときも「.(class)」のときも同じhogeでは。
これではクラス名がhogeで、かつそのクラスの中の鈴木君もhogeという名前になってしまいます。
なので、本当はclass名とid名は違う名前に書くおつもりだったと理解しました。なので言い換えるとおそらく、

●鈴木君という個人(id)だけに機能させる記述
div#id-suzuki {
xxxxxxxx
}

●百合組というクラス(class)だけに機能させる記述
div.class-yuri {
xxxxxxxx
}

そして、やはりわからないのが、「div#hoge」というようになぜ「div」を頭にもってくる必要があるのかがわかりません。
HTMLファイルで、「hoge」と記述している箇所にだけ、「hoge」というCSSで記述した機能は適用されるのですから、CSSファイルで、
div#hoge {
と書かずに、
#hoge {
と書けばいいだけじゃないかと思ってしまうんです。
もとより、HTMLファイルの中の「<div id="hoge">etc</div>」と書かれてあるところだけに「hoge」は適用されるので、そもそも他で適用されることがないと思うんです。
なので、CSSファイルの方で「div#hoge」と書く意味がどうにもわかりません。たぶん私が何かまだわかっていないだけだとは思うのですが・・・

補足

検索結果で出ない件、私もそう思っております。
#のせいだと思います。
検索君、もう少し頑張ってくれ～～^^;

回答No.4

noname#248942

おそらく正しくは,DIV #hogeで、divタグ内のidがhogeのエレメントだけに適用するという意味では無いでしょうか。
普通は、クラスを指定すると思いますが。

お礼

ありがとうございます<(_ _)>

他の方の回答を呼んいて理解したのは、
hogeの機能が反映されるのが、<div id="hoge">と書かれてあるところだけにする、
という意味で、hogeを他のタグ、例えば<p id="hoge">などと使うことができない、
ということではないんでしょうか。

hogeの機能がdiv idに効くんではなくて、
div idの機能がhogeに効くんでしょうか。
済みません、ちょっとわからなくなりました

回答No.3

leap_day

（＞＜）

変なものがついてる・・・

#div#hoge{ *** } (誤）

div#hoge { *** }（正）

回答No.2

leap_day

こんにちは

<div id="hoge">のみを示します

例えば(通常idはページに対してひとつですが仮に）
<div id="hoge">&nbsp;</div>
<p id="hoge">&nbsp;</p>
としていたとすると

#hoge { *** }
とした場合には
<div id="hoge">&nbsp;</div>とした場合にも
<p id="hoge>&nbsp;</p>とした場合にもCSSを適応させることができますが

#div#hoge [ *** }
とした場合には
<div id="hoge">&nbsp;</div>にはCSSが適応されますが
<p id="hoge">&nbsp;</p>とした場合にはCSSは適応されません

お礼

いつもいつもありがとうございます<(_ _)>

なるほど！
Pタグなど他のタグで使うこと自体考えていませんでしたが、こういう使い方をするのも
合理化の一環であることなんでしょうね。
その有用さが自分ではまだ想像できませんが、とにかくそのDIVタグにしか
通用させない
ようにしたい場合にこう記述するんですね！
わかりやすかったです！

回答No.1

auty

＞＞＞　この「DIV#」とは何でしょうか？

「DIV#」ではなくて、#hogeの事です。

DIV#hoge
これは、
id=#hoge
という属性を持つ要素が要素DIVに含まれているということを意味します。

つまり、DIVという要素に含まれる、 id=#hogeを持つ要素と言う事になります。

お礼

またまたありがとうございます<(_ _)>
なるほど、DIVという要素に含まれるidなんですね。