css li に入れ子で適用する範囲

質問

HTML の li にｃｓｓを適用する場合ですが
下のように入れ子の場合
A行に　　#aaaaa {background-color:yellow;}
B行に　　#bbbbb {background-color:pink;}

B行の部分だけはピンクになりますが
A行の入れ子部分は黄色です
このような入れ子状態で、A行一行のみ黄色にすることはできますか

A行の下の <ul>に対して、別の cssを適用するなど
なにか方法があれば教えてください

よろしく、お願いします

<ul>
　　<li>1st item</li>
　　<li>2nd item
　　　　<ul>
　　　　　　<li>2 - 1</li>
　　　　　　<li id="aaaaa">2 - 2　　　　...A行
　　　　　　　　<ul>
　　　　　　　　　　<li id="bbbbb">2 - 2 - 1</li>　　...B行
　　　　　　　　　　<li>2 - 2 - 2</li>
　　　　　　　　　　<li>2 - 2 - 3</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li>2 - 3</li>
　　　　</ul>
　　</li>
　　<li>3rd item</li>
</ul>

回答No.1

ORUKA1951 · ベストアンサー

<ul>
　　<li>1st item</li>
　　<li>2nd item
　　　　<ul>
　　　　　　<li>2 - 1</li>
　　　　　　<li>2 - 2
　　　　　　　　<ul>
　　　　　　　　　　<li>2 - 2 - 1</li>
　　　　　　　　　　<li>2 - 2 - 2</li>
　　　　　　　　　　<li>2 - 2 - 3</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li>2 - 3</li>
　　　　</ul>
　　</li>
　　<li>3rd item</li>
</ul>

★デザインのためにidやclass名を付けるのではありません。
　あくまで、文書構造を示すためにタグを使い、それだけでは明確でないときの補助

　上の場合
ul li+li{background-color:yellow;}
ul li+li+li{background-color:transparent;}/* pinkはない */
ul li ul,
ul li ul li{background-color:fuchsia;}
ul li ul li+li{background-color:transparent;}

あるいは、
ul>li+li{background-color:yellow;}
ul>li+li+li{background-color:transparent;}
ul>li>ul>li:first-child{background-color:fuchsia;]

CSS3でしたら
ul>li:nth-child(2){background-color:yellow;}
ul>li:nth-child(2)>ul>li:first-child{background-color:fuchsia;}

とか、もちろん他のul要素に効かせたくないでしょうから、それがheaderDIVにあるものだけでしたら
div.header ul>li+li{background-color:yellow;}
div.header ul>li+li+li{background-color:transparent;}
div.header ul>li>ul>li:first-child{background-color:fuchsia;]

　もちろん、
　　　　　　<li><a href="./2_2.html">2 - 2</a>
　　　　　　　　<ul>
　　　　　　　　　　<li>2 - 2 - 1</li>
　　　　　　　　　　<li>2 - 2 - 2</li>
　　　　　　　　　　<li>2 - 2 - 3</li>
　　　　　　　　</ul>
　　　　　　</li>
てじたら、
li{position:relative;}
li a{width:100%;height:100%;}
li a[href="./2_2.html"]{background-color:yellow;}
li a[href="./2_2.html"] ul li:first-child a{background-color:fuchsia;}
もありうるわけで

★HTMLは文書構造だけをマークアップすること
★セレクタはその文書構造に基づいて書くこと

　CSS(カスケーディングスタイルシート)のカスケードの仕組みを理解していないと、複雑怪奇でメンテナンスができなくなるHTML、CSSを書くことになります。
　そのため、CSSの命といえるカスケード
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
　をまず身につけましょう。仕様書でもプロパティより前に説明がある。

お礼

くわしく説明してもらえて
ありがとうございます