CSSでID指定の親子を重ねる理由

質問

<div id="1">
<div id="2">
</div>
</div>

というDOM構造に対し、

#1 #2{color:#fff;}

のようなスタイルの指定をサンプルやハウツーよく見かけます。
2はIDなので、わざわざ親の#1の中にある#2と指定しなくても#2が指定されるでしょう。
なぜ、#1 #2{color:#fff;}のような記述をするのでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

No.2です。
＞ブラウザがDOMツリーを上から順に読み込み、先にCSS抜きでHTMLとHTMLに記載された画像をブラウザに表示するでしょう。
　想像で書いたらダメです。実はブラウザ自身もスタイルシートを持っているのです。具体的にどのように動作するかはブラウザによって異なるでしょうが、
　仕様書には、
1) 対象の要素とプロパティに適用される宣言をすべて検索する
2) 宣言の最初のソートは、優先度及び出所によって行う。
3) 次に詳細度によるソートを行う。
　※ここで初めてブラウザのスタイルシートと共に比較されます。これまでは描画は行われません。
4) 最後に指定された順序によるソートを行う。
となっています。
・14.4 カスケードするスタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4 )
・6.4 カスケード処理（The cascade） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )
　その後でDOMを参照して、どのスタイルを適用するかを決めているはずです。HTMLを読んだだけでは、DOMに現れない(擬似要素・擬似クラス)セレクタもいくつかあります。

(3)の詳細度でのソートと、同じ詳細度なら(4)の出現順番が関わってきますから、速度には現れないのではないかと思います。

回答No.4

ss-ak

意味があるとすれば、そのCSSを複数のHTML文書で共有して使用したり、HTMLが動的に変化するWebアプリケーション等の場合において、エレメントの階層構造が指定の組み合わせになった場合のみ有効となるスタイル指定をしたい場合、でしょうかね。

例を示します(実例として良いか否かは、大目に見てください)。

【HTML例１(写真アルバムのページ)】
<div id="photoAlbum">
<div id="pageTitle">写真アルバムA</div>
</div>

【HTML例２(文章のページ)】
<div id="articleArea">
<div id="pageTitle">文章B</div>
</div>

photoAlbum、articleArea、pageTitleは、それぞれページ内に必ず一つしか置かない文書構造とするならば、それをクラスではなくidにすることには、それなりに意味があると思われます。

これらのページ群で、同じCSSを共有するようにした場合に、例えば写真アルバムのタイトルのみに指定したいスタイルがある場合は、次のような書き方になるかと思います。

#photoAlbum #pageTitle {
/* ここに、写真アルバム用のタイトルのスタイル指定を書く */
}

こういう書き方を積極的にすべきなのかどうかは、サイト全体の設計やメンテナンス等の要件によるでしょうし、いちがいには言えないと思いますが、書き方的には、まあ、ありと言えば、ありなのではないかと。

ちなみに、処理速度への影響は、この場合は殆ど(実質的には全く)ないと考えて良いと思います。
(通信や、他のレンダリング処理等の方が、問題にならないくらいに、遥かに大きいため)

回答No.2

ORUKA1951

そのマニュアルは捨てましょう。
IDに数字を先頭に置くことはできません。
ID--すなわち一意セレクタは詳細度が0,1,0,0でしかも、そのページには一箇所しかなく、かつ基数大きいので、たとえ#ID1 #ID2 #ID3・・・#ID20{}としてもstyle属性での指定(詳細度1,0,0,0)より優位に立つことはありません。
　なのにそれが使われているのは、もしちゃんと理解して例示しているとしたら
・一枚のスタイルシートを複数のHTMLに適用させたときに、区別される
・詳細度が高くなり詳細度の差で指定が変えられる
　などの理由からです。
---ただ、きちんとHTMLやCSSを理解しているとは思えません。なら、重要なことですから、説明がされているはずです。

[HTML1]
<div id="ID1">
　<div id=""ID2">

[HTML2]
<div id="ID3">
　<div id=""ID2">

の場合、
#ID1 #ID2{}が適用されるのは、HTML1だけですね。
また、
#ID #ID2{color:blue}
#ID1,#ID2{color:red;}
とあれば、前者の詳細度が0,2,0,0になりますから、続く指定でも上書きされませんね。

★CSS2以降、基点となるセレクタを書くことになっています。ない場合は*(全称セレクタ--詳細度 0,0,0,0 )があるとみなされますが・・・。

★一意セレクタは、その要素にしか有効でなく、かつ詳細度も高いためスタイルのためだけにIDを振るのは感心しません。
[HTML1]
<div class="header">
　<div class="nav"></div>
</div>

[HTML2]
<div class="section">
　<div class="nav"></div>
</div>
<div class="footer">
　<div class="nav"></div>
　<div class="nav"></div>
</div>

でも、この4つのdiv.navはいくらでも区別できるわけですから・・
div.nav{}
div.header div.nav{}
div.section div.nav{}
div.footer div.nav{}
div.footer div.nav + div.nav{}
と・・そうすると共通する部分はclassですから一挙に指定できますし、変えたいところのみ詳細度にしたがって上書きすれば良いですから・・

お礼

そうですね。

ところで、実際の動作はどうなるのでしょうか？
ブラウザがDOMツリーを上から順に読み込み、先にCSS抜きでHTMLとHTMLに記載された画像をブラウザに表示するでしょう。
次に、CSSを読み込み、CSSのセレクタを見つけたら、HTMLに戻り、HTMLの要素を上から順にマッチングさせていくのでしょう。

だとしたら、CSSのセレクタとHTMLの要素を上から順にマッチングさせ、ひとつ見つかったらマッチングを中断して、次CSSセレクタに移るのがID、
CSSのセレクタとHTMLの要素を上から順にマッチングさせ、ひとつ見つかっても、</html>までマッチングし続けるのがClassなのだと思います。
この仮説が正しかったとしたら、詳細度の都合ならセレクタを親子として重ねる必要が無くても、読み込み効率化の都合で重ねべき場合もあるのではないでしょうか？

回答No.1

naokita

CSSファイルの中で、見やすくする為、何処の子か把握できる。

HTMLファイルでのtabインデントみたいなもの。

補足

ありがとうございます。
それの影響で遅くなったりはないのでしょうか？