CSS で箇条書きの書式を設定（レベルごとに）

質問

css で
●第１レベル
　　◇第２レベル
　　◇第２レベル
　　　　★第３レベル
　　　　★第３レベル
　　◇第２レベル
●第１レベル
　　◇第２レベル

のように、箇条書きのレベルごとに、違う先頭文字（画像）を使いたいと思っているのですが、どうすればよいのでしょうか。

<style type="text/css"><!--
li {
　list-style-image: url(botan.gif)
}
--></style>

とすると、全てのレベルの画像に適用されてしまいます。

回答No.1

Bo_Bo · ベストアンサー

QNo.654456 で回答した Bo_Bo です。

階層ごとに指定する画像が以下のような場合、

　第１レベル => level1.gif
　第２レベル => level2.gif
　第３レベル => level3.gif

<style type="text/css">
<!--
ul { list-style-image: url(level1.gif) }
ul ul { list-style-image: url(level2.gif) }
ul ul ul { list-style-image: url(level3.gif) }
-->
</style>

となります。
あまり深い階層までスタイルを指定しないほうが良いかも。

お礼

Bo_Bo さん、ありがとうございます。
完璧です。助かります。

ところで、

> あまり深い階層までスタイルを指定しないほうが良いかも。

これはなぜなのでしょうか？

回答No.2

Bo_Bo

>> あまり深い階層までスタイルを指定しないほうが良いかも。
>これはなぜなのでしょうか？

表現の仕方が適切でなかったかもしれません。
以下訂正します。

リストの入れ子を複雑にして、その項目数が多く、且つ複雑なスタイル指定をすると、ブラウザがレンダリングに失敗する時があるようです。
そこまでなるようなリストを作成することはないとは思いますが、以前、私が実験した時に一度なりましたので、件の発言をしました。

お礼

なるほど、ありがとうございました。