CSSの記法

質問

インターネット上のサンプルを参考に下記ソース(画像が横一列に並ぶ)を試してみたのですが
CSSファイルの　「#list li」の部分の意味がいまいちよくわからないので教えてください。
下記の1又は2の解釈のどちらが正しいのでしょうか。

１．「id="list"」 又は 「li」タグに対して適用する(下記リンクの質問の回答に従えばこちらの解釈？)
http://okwave.jp/qa/q8040531.html

２．「id="list"」の要素の配下の「li」タグに適用する

【サンプルのCSS】
　　#list li {
　　　　margin:20px;
　　　　height:140px;
　　　　list-style-type:none;
　　　　float:left;
　　}

【サンプルのHTML】
　　　<ul id="list">
<li><img src="./img/Desert.jpg"></li>
<li><img src="./img/Koala.jpg"></li>
<li><img src="./img/Tulips.jpg"></li>
<li><img src="./img/Penguins.jpg"></li>
　　　</ul>

1．の解釈で正しければ
　　#list {
　　　　margin:20px;
　　　　height:140px;
　　　　list-style-type:none;
　　　　float:left;
　　}
「#list li」　→　「#list」
と変更してもレイアウトに変更はないと思いましたがこれでは横に並んでいた画像が
縦に並ぶようになってしまいました。

2．の解釈が正しければ下記のようCSSファイル内に「#list」を追加して記述しても
「#list li 」が適用されて追加前と比べてもレイアウトに変更はないと思ったのですが
微妙に「#list」の影響を受け（float:right;としているせいか画像が少し右寄りに表示された）ました。

「#list li 」という記述は１と２のどちらの意味になるのでしょうか。

　　#list {
　　　　margin:20px;
　　　　height:140px;
　　　　list-style-type:none;
　　　　float:right;
　　}

　　#list li {
margin:20px;
height:140px;
list-style-type:none;
float:left;
　　}

回答No.3

tkmojo · ベストアンサー

明らかに2が正しいです。
スペースが空くと、配下への指定となります。

#list
（id="list"に対する指定）

#list li
（id="list"配下のliに対する指定）

ul#list li
（id="list"がついているulの配下にあるliに対する指定）

#list li#desert
（id="list"の配下にある、id="desert"がついているliに対する指定）

#list li li
（id="list"の配下にあるliの配下にあるliに対する指定）

.list#list1 li
（class="list"とid="list1"が両方付いているタグの配下にあるliに対する指定）

#list1 li,#list2 li
（id="list1"の配下にあるli、id="list2"の配下にあるliの両方に対する指定）

> 2．の解釈が正しければ下記のようCSSファイル内に「#list」を追加して記述しても
> 「#list li 」が適用されて追加前と比べてもレイアウトに変更はないと思ったのですが
> 微妙に「#list」の影響を受け（float:right;としているせいか画像が少し右寄りに表示された）ました。

>　　#list {
>　　　　margin:20px;
>　　　　height:140px;
>　　　　list-style-type:none;
>　　　　float:right;
>　　}

この#listは<ul id="list">に対して有効な指定ですので、
レイアウトに変更が無い事はあり得ません。
float:right;もそうですが、margin:20px;の効果もあります。
ulとliの両方にmargin:20px;があるので、親ボックスの左からは当然40px離れます。

お礼

ご回答ありがとうございます。
詳細なご解説ありがとうございます。
とても参考になりました。

回答No.4

Katsu_Kaiz

解釈として正しいのは、「２」のほうです。そもそも画像を横一列に並べるには、親要素の <ul> ではなく、子要素の <li> を float: left; しなければなりません。たとえるならば、<ul> という大きな箱があって、そのなかの <li> を横並びにするような感じです。

　そのうえで、
　　◆#list li ………… <ul id="list"> のなかにある <li> に適用されるので、横並び。
　　◆#list …………… <ul id="list"> に適用されるので、横並びはせずに、<ul> 全体の位置がずれる。
　　◆#list { }
　　　#list li { } …… 最初に、<ul id="list"> 全体が右による。そのうえで、<ul id="list"> のなかにある <li> が横並び。
となります。

　なお、「#list, li」というふうに「,」で区切ると、<ul id="list"> と <li> の両方に適用されます。こうした適用関係がわからなくなったときは、<ul id="list" style="background: red;"> のように、適当な背景色をつけるといいです。見た目は悪くなりますが、全体の位置関係を理解できますよ。

参考URL：

http://htmq.com/csskihon/005.shtml

お礼

ご回答ありがとうございます。
詳細なご解説と検証方法、
とても参考になりました。

回答No.2

ORUKA1951

自分で言うのもなんだが、その回答のベストアンサーがついている回答は間違ってます。
グループ化は、,で区切って並べたものです。
「　⇒複数のセレクタで同じ宣言を共有する時、それらのセレクタはコンマで区切ってグループ化することが可能である。( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#grouping )」

★半角スペースは、「子孫セレクタ」です。No.1の回答を理解すること。
　スタイルシートを身に付けようと思ったら、仕様書を読むこと。HTMLだって仕様書を読んでおかなきゃならないのと同じです。
・5.セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
・6.値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
　もちろん最初から読んでおくべきですが・・

お礼

ご回答ありがとうございます。
参考にしていた回答が誤っていたのですね。
スッキリしました。

回答No.1

Tacosan

仕様を見れば「1 ではない」ことは明らかなんだけどなぁ....

厳密にいえば
ID属性の値が list であるような任意の要素の中にある li 要素
を指定している.

参考URL：

http://www.w3.org/TR/css3-selectors/

お礼

ご回答ありがとうございます。