CSS idセレクタについて教えてください

質問

いろいろな Web の CSS を参考にして CSS を書いているのですが、id セレクタの並列記載について理解が出来ないので教えてください。

とある Web にあった CSS の記述で、

#contents {
margin: 0px;
padding: 0px;
width: 800px;
background: #FFFFFF;
}

#header {
margin: 0px;
padding: 0px;
background: #FFFFFF url(title.gif) no-repeat center top;
height: 60px;
width:800px;
text-align: center;
display: block;
position: relative;
}

は理解できるのですが、左側にメニューを配置する設定に関して

#contents #sidemenu {
margin: 5px;
padding: 0px;
float: left;
width: 160px;
text-align: left;
background-color: #FFFFFF;
}

となっていて、#sidemenu ではなく、#contents #sidemenu となっていました。

<div id="contents">
あいうえお
<div id="header">
かきくけこ
</div>
<div id="sidemenu">
メニュー
</div>
さらにコンテンツ
</div>
とすれば、contents の要素は header にも sidemenu にも継承されると思っていたのですが違っているのでしょうか。

contents と sidemenu の両要素を反映させるために #contents #sidemenu となっているのでしょうか。

初歩的な質問だと思いますが、どうぞよろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

私は、Wordpressを使うときも、SEOの観点からお仕着せのidやclass名を使いませんが、

＞id セレクタの並列記載について
　並列記載ではありません！！！！並列記載(グループ化)は、#contents,#sidemenu{}と書きます。間の半角スペースには大事な意味があります。

#contents #sidemenu {
と書かれているということは、子孫セレクタを表しています。一意セレクタである#contentsの子孫の#sidemenuについての指定ですね。
　本来一意セレクタは、ひとつの文書内に一回しか出てこないため、屋上屋を重ねるような書き方はしないのですが、この様な書き方がされているということは、
・その外部スタイルシートが他のページでも使用されている。
・#sidemenuが、他の子孫であるときがある。
のときですね。
　別のページではDOMツリーが
#header
　|-- #sidemenu
となっている可能性があり、その場合はデザインが異なるという事です。

＞contents と sidemenu の両要素を反映させるために
　これは、根本的な意味で間違いです。
　contents と sidemenu　はid名ですから、#contentsは「contentsというidを持つすべての要素」 と #sidemenuは「sidemenuというidをもつすべての要素」に対するセレクタです。

＞いろいろな Web の CSS を参考にして CSS を書いているのですが、
　これは最悪の習得パターンで、多くの場合、誤った記載を身につけてしまいます。Web上にある大多数のサイトは間違っているのですから。
　参考にするのでしたら仕様書、リファレンスです。

<div id="contents">
あいうえお
<div id="header">
かきくけこ
</div>
<div id="sidemenu">
メニュー
</div>
さらにコンテンツ
</div>

んな書き方は典型的な誤りです。
HTML4.01(1999年以来)
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされているはずです。これでは、あなたがお書きになったように、正しく理解されなかった反省から、HTML5では、『文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
section,article,aside,hgroup,header,foote・・・・・

　<div class="header">
　　かきくけこ
　</div>
　<div class="section">
　　本文
　　<div class="nav">
　　　メニュー
　　</div>
　</div>
のように書かれることが期待されていたのです。ナビゲーションをスタイルシートで、サイドに表示しようが、ページのトップに表示しようが、ページの最下段に横並びにしようが、それはプレゼンテーションの話で、文書構造ではありません。

　スタイルシートも、
　div.header div.nav{}
と
　div.section div.nav{}
で（子孫セレクタで）区別できるのですから、詳細度の高い扱いにくい一意セレクタを使う必要もなくなります。

スタイルシートは、
div.header,div.section{
width:800px;
background-color:white;
margin:0 auto;
}
div.header{
background: #FFFFFF url(title.gif) no-repeat center top;
height: 60px;
text-align: center;
}
div.section{
position:relative;
}
div.section>*{
margin-left:160px;
}
div.section div.nav{
margin: 5px;
position:absolute;
left:0;top:0;
width: 160px;
}
だけですむ。

Webで、正しい情報を得るのは、藁の中の針を探すより難しいです。
HTMLもCSSもまず、仕様書を読みましょう。

お礼

詳しい説明ありがとうございます。

今まで class しか使った事がなかったのですが、id を使ってみようと思って理解不能に陥ってしまいました。

仕様書を読むのが一番ですね。

即興的にWEBを作成しようとすると躓きが多いものですが、その都度仕様書を読むように心がけたいと思います。

あまり複雑なことはせず、シンプルにすることが一番ですね。。。

HTML も仕様が次々の変わってなかなか追いつけません。
Table を使ったレイアウトばかりしていた頃がかえって懐かしいです。

ご説明頂いた事を参考にして理解を深めたいと思います。

ありがとうございました。

回答No.2

Tacosan

4

回答No.1

kosukejlampnet

http://weboook.blog22.fc2.com/blog-entry-268.html

補足

早速ありがとうございます。

id の並列標記についての記述を見つけられませんでしたが、どこかにリンクがあるのでしょうか。

教えて頂ければ幸いです。