2階層下の要素に、class指定を使わずスタイル設定をしたい

リストで、大・中・小項目となる構造のメニューを作り、class指定を使わずに、各項目にCSSでスタイルを設定したいのですが、可能でしょうか？

HTML
1<ul>
2<li>大項目</li>
3　<ul>
4　<li>中項目</li>
5　　<ul>
6　　<li>小項目</li>
7　　</ul>
8　</ul>
9<li>大項目</li>
10<li>大項目</li>
11</ul>

大項目は、ul liをそのまま指定し、
中項目は、

CSS
1ul li > ul li { ●● }

と直下参照で効かせられたのですが、更にもう１階層下に限定して指定する方法が、あちこちで検索してみてもわからず困っております。

小項目のliにclassを使えれば早いのですが、スクリプトでHTML側は自動生成する都合、CSSのみで何とか出来ないか調べているところです。

自分が見落としている指定方法や、何かよいアイデアがありましたら、お知恵をお貸しいただけないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

まずulタグの直下にulはおけません。
また修飾したい部分はなにかタグ付けしないと設定しづらいかもしれません

CSS
1
2<style>
3:not(li)>ul>li>span{
4color:red;
5}
6:not(li)>ul>li>ul>li>span{
7color:blue;
8}
9:not(li)>ul>li>ul>li>ul>li>span{
10color:yellow;
11}
12</style>
13<ul>
14  <li><span>大項目</span>
15  <ul>
16    <li><span>中項目</span>
17    <ul>
18      <li><span>小項目</span></li>
19    </ul>
20    </li>
21  </ul>
22  </li>
23  <li><span>大項目</span></li>
24  <li><span>大項目</span></li>
25</ul>