CSSについて質問です （IDセレクタ）

質問

ＣＳＳ初心者です。困っております。

<dl id="info">
<dt>文章１</dt>
<dd>
<p>文章２</p>
</dd>
<dt>文章３</dt>
<dd>
<p>文章４</p>
</dd>
</dl>

上記のＣＳＳで文章１と３の色を変えたい場合、
下記はどれが正しいのでしょうか？
このＩＤセレクタがどうも、いまいちよくわかりません。
なぜ、＃の前に置いたり置かなかったりするのでしょうか？

dl#infoData dt{
color:#663300;
}

#infoData dt{
color:#663300;
}

わかる方よろしくお願い致します。

回答No.3

ORUKA1951

≫カスケードにおいて差が出る場合とありますが、どういう事なんでしょうか？

この例で言うと、
1) dl#infoData dt というセレクタの詳細度は、100×1 ＋ １×２ ＝ １０２
2) #infoData dt だと、100×１　＋ １＝１０１
になります。
　この場合、
dl#infoData dt というセレクタが、これより前にあると、　(1)と同じ詳細度ですから、後出の(1)で上書きされますが、(2)の宣言では上書きできないということ。
　決して他のページでとかではなく。詳細度が関わるからです。

　カスケードとはこの継承の仕組みが、ある意味、最も重要なのでプロパティを覚えるより先に学んでおくべきかと・・。

　なお、
<dl id="info">
<dt>文章１</dt>
<dd>
<p>文章２</p>
</dd>
<dt>文章３</dt>
<dd>
<p>文章４</p>
</dd>
</dl>
にて、文章３の色を変えたいときは、
dl%infoData > dt{ 色１}　ですべてのdtの色が変わる。
ついで、
dl#infoData > dt + dt{ 色２}で、文章２以降が色２に
dl#infoData > dt + dt + dt{色３}で、文章３以降が色３に
dl#infoData < dt + dt + dt + dt{色４}で文章４が色４に
・・・詳細度は、上から 102,103,104,105になります。ですから記述順は関係ないということです。

CSSを勉強するなら、
1) 参照方法
2) 基本構造 セレクタ{プロパティ}
3) カスケード　重要度/出所/詳細度
4) プロパティ
　としないと効率が悪いです。(3)を抜かすと、指定がうまく行かないと悩むことになります。

お礼

そういう事っだたんですね。ありがとうございます。とても理解できました。

回答No.2

ORUKA1951

質問の意味が分からない部分があるので補足してください。
≫上記のＣＳＳで文章１と３の色を変えたい場合、
は、「上記のＣＳＳで文章１と【、文章】３の色を変えたい場合、」という質問ですか？
　隣接セレクタを使用します。

≫dl#infoData dt{　と #infoData dt{
★タイプ セレクタ + 一意セレクタ
★一意セレクタ
　の差ですから、そのページだけに関しては、普通は差が出ませんが、カスケードに置いて差が出る場合があります。
　　CSS2では、前者が詳細度2になりますから、より優先されます。詳細度を考慮してCSSを書きますから、他の設定で上書きされることを避けるために、あるいより詳細度の高いもので上書きされるかを考慮して、いずれの書き方をするかを決めてください。

Ｑ:質問が二つあります。
　整理して補足してください。

補足

ご回答ありがとうございます。丁寧にありがとうございます。
「上記のＣＳＳで文章１と【、文章】３の色を変えたい場合、」というのは、例えばの話です。知りたいのは、なぜ＃の前に付けたりしないといけないのかが、知りたっかったのです。カスケードにおいて差が出る場合とありますが、どういう事なんでしょうか？あと、「常にタイプ セレクタ + 一意セレクタ」にして表示してもいいような気もしたのですが、どうなんでしょうか？質問ばかりですいません。

回答No.1

noname#83877

#の前に置くのは複数のページに同じcssを指定するときに便利だからです。
例えば、2つのページの#infoDataのマークアップした要素がそれぞれ違い、デザインをそれぞれ別に与えたいとすると

dl#infoData dt {
color:#663300;
}

ul#infoData dt {
color:#003366;
}

とするわけです。
idの持つ意味が重複するが、別の要素なので別のデザインで使いたい、だけどcssは共通にしたいというニーズに応えるためのテクニックです。

お礼

とても分かりやすいです。そういう事っだったんですね。
ありがとうございました。