idの入れ子なのでしょうか？

質問

最近ＨＰ作成の勉強をはじめたものです
初歩的な質問かもしれませんがお願いします
現在使っている参考書のソースにｃｓｓの下記の記述があるのですが
これはどういった意味なのでしょうか？
#navi li#policy a {
height: 20px;
width: 53px;
background: url(../images/policy.gif) no-repeat;
}
#navi li#policy a:hover {
height: 20px;
width: 53px;
background: url(../images/policy_o.gif) no-repeat;

これは#naviのlｉの中にある#policy のa要素のプロパティをさすのでしょうか？
お願いします

回答No.1

suzuki-_- · ベストアンサー

＞ これは#naviのlｉの中にある#policy のa要素のプロパティをさすのでしょうか？

ちょっと違いますね　正確には、

「#navi」の中の「#policyというID名のli」の中にある「a」

のような感じです（liの中にある#policyではない）
「#navi li#policy a」の空白部分で切り分けるとわかりやすいです

HTMLの記述だと、以下のような例のアンカーが対象となります
<ul id="navi">
<li id="policy"><a href="hoge.html">hoge</a></li>
</ul>

"中の"・"中にある"という説明は前方エレメント及びID・class等の直下でなくてもいいので、
下記のような記述例でも内容は反映はされます
（実際こういう使い方はわかりにくいので推奨はしません）

<div id="navi">
<ul>
<li id="policy"><span><a href="hoge.html">hoge</a></span></li>
</ul>
</div>

又、質問内容とはずれますが、<a>はインライン要素なので、widthやheightの設定はできません
実際反映させるとなると、どこかしらでaをブロック要素として設定する必要があります

例：
#navi li#policy a {
display:block;
height: 20px;
：略
}

お礼

あっ＾＾
なるほど！！！すごいよくわかりました＾＾
「#navi li」と「#policy a」で分けて考えていました！！
完全に思い込んでました・・・

＃ｎａｖｉはｄｉｖで設定してあるので問題ないのでしょうか？

ありがとうございます！すっきりしました＾＾