ulやol、どの階層に居てもOKなcss記述方法

質問

例えば、こんな場合でも

<ol>
　　<li>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li>
　　　　　　　　<ol>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li>
　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　</li>
　　　　　　　　</ol>
　　　　　　</li>
　　　　　　<li></li>
　　　　　　<li>
　　　　　　　　<ol>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li></li>
　　　　　　　　</ol>
　　　　　　</li>
　　　　</ul>
　　</li>
　　<li></li>
　　<li></li>
</ol>

こんな場合でも

<ul>
　　<li>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li>
　　　　　　　　<ul>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li>
　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　<li>
　　　　　　　　　　　　　　　　<ul>
　　　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　　　　　<li></li>
　　　　　　　　　　　　　　　　</ul>
　　　　　　　　　　　　　　</li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　　　</li>
　　　　　　<li></li>
　　　　　　<li>
　　　　　　　　<ol>
　　　　　　　　　　<li></li>
　　　　　　　　　　<li></li>
　　　　　　　　</ol>
　　　　　　</li>
　　　　</ul>
　　</li>
　　<li></li>
　　<li></li>
</ul>

どの階層上のol、ulでも

ulのliには、list-style-typeのdisc(・)が付き、
olのliには、list-style-typeのdecimal(1、2、3…)が付く

cssのシンプルな記述方法を教えて下さい。

何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。

ul liで設定すると、ul内にあるol liが意図しないマークになる。
liのみ設定すると、ulかolのどちらかで意図しないマークになる。

ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか)
をするしかやり方はないのでしょうか？

回答No.2

ORUKA1951 · ベストアンサー

ul{list-style-type:disc;}
ol{list-style-type:decimal;}
ブラウザの持つスタイルは優先順位最下位です。
1)優先順位
　ユーザーの最重要宣言されたスタイル
　　＞著者の最重要宣言されたスタイル
　　　＞著者のスタイル
　　　　＞ユーザーのスタイル
　　　　　＞ユーザーエージェントのスタイル
2)継承
　list-style-typeは、liについての指定ですが、継承されるプロパティです。
list-style-type'( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#propdef-list-style-type )
　　★Inherited: yes

よって、上記の二行で良いです。この場合詳細度はタイプセレクタのみですから、[0 0 0 1]になりますから、必要に応じてセレクタを追加して変更できるでしょう。

　⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
　⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

　は、list-style-typeなどのプロパティより先に、正確にきちんと身につけるべきです。最低でもこれらについて、プロパティより前に詳しく説明していない参考書やサイトは利用したらダメです。

お礼

ORUKA1951さん

ありがとうございます。ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。何で気づかなかったのだろう・・・恥ずかしい・・。

ホントにありがとうございました。

回答No.4

ORUKA1951

＞ホント一番簡単で誰でも思いつきそうな設定で良かったんですね。何で気づかなかったのだろう
　実は、これは仕様書にも明確に書かれているのです。
　⇒リスト: 'list-style-type'、'list-style-image'、'list-style-position'、'list-style'
　　( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#lists )
の一番最後に
引用＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
子孫セレクタのみを使うと意図した結果を得られないことがある。 次の文書で考えてみよう:
・・・【中略】・・・
「level2」のリスト項目に'disc'のマーカーを意図している。 しかし、最初の規則はクラスセレクタを含んでいるので、カスケード処理の順序に従うと2つ目の規則が上書きされてしまう。 それに対して、次に示す規則のように子供セレクタを使えば問題は解決する:
・・・【中略】・・・
もう1つの解決法は、'list-style'をリスト種類の要素にのみ設定する方法である:
・・・【中略】・・・
'list-style'の値はOL要素からLI要素へと継承されることになる。
リスト形式を指定するのにはこの方法を用いるよう推奨する。
引用￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで

　仕様書を読むのは、確かに面倒ですが、探せば必要な情報が見つかります。
なお、現行のCSS2.1はこの仕様書(邦訳CSS2.0)からいくつか改訂されています。
　⇒変更点(CSS2.1 Appendix C 邦訳)( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )
　⇒Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification( http://www.w3.org/TR/CSS2/ )
もあわせて目を通しておくと良いでしょう。
　セレクタやカスケーディングというCSS(カスケーディングスタイルシート)の根幹を学ばれると、スタイルシートだけではなく、HTMLもとっても簡潔に分かりやすくなります。

回答No.3

ORUKA1951

No2です。
基本がいかに大事か。
＞ul liで設定すると、ul内にあるol liが意図しないマークになる。
　基点となるせれくたがulで、半角スペース（子孫セレクタ）でliが指定してあるため、デフォルトのスタイルでol liにdecimalが指定されていても、ul/olに関わらず、子孫であるliには ul li{}の指定(詳細度0002)が利かなければならない !!はずですよね。

＞liのみ設定すると、ulかolのどちらかで意図しないマークになる。
　liはタイプセレクタです。

　とっても単純な事です。これができてないと言うことは、明らかに大事な基礎をすっ飛ばしています。
★なお、詳細度の計算は現行のCSS2.1では変更になっています。
　⇒6.4.3 Calculating a selector's specificity( http://www.w3.org/TR/CSS2/cascade.html#specificity )

回答No.1

play_with_you

https://www.google.co.jp/search?&q=css+%E5%AD%90%E5%AD%AB%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BFa

ul > li
でul直下のliのみ適用。
ただしIE（7以下だったかな）は対応できないので、結局はごちゃごちゃと指定するかいわゆる「ハック」を使う羽目になると思います。