純正のサイトマップページで、親カテと子ページでリストマーカーが区別されている。CSSの加工はどうやればできる？ 【解決済み】

[modxfan]

CPIサーバ
バージョン：1.0.5J-r3

純正で入っていた黒と緑のMODxテンプレの中で、サイトマップページ（sitemap.xmlではない）があったので、そこの[*content*]に入っていた以下のWayfinderのコール記述をそのまま流用して、

[[Wayfinder? &startId=`0` &showDescription=`1`]]

実際に制作したサイトマップページに仕込みました。
これだけでサイトマップが自動生成されるので、これぞCMS！と喜んだのですが、自分のテンプレートに適用すると、当然ですが整形がされていないのでデザイン整形したいのですが、入れ子になっているリストタグの記述の場合にどうやってCSS記述すればいいでしょうか？

現在、親カテゴリ内の子ページがインデントもされずに親カテゴリと同じ非インデント状態で同列に並んでいます。以下のように。
ただし、リストの●が区別されていて以下のように表示されています。

●ホーム
●製品案内
○製品A
○製品B
●会社案内
○アクセスマップ
○沿革
●ニュース
○製品Cが販売開始されました！
○Webサイトをリニューアルいたしました

リストマーカーが区別されているので何らかでCSS記述させることができると思うのですが、入れ子になっているliのリストマーカーは○で、親カテやホームのリストマーカーは●になっているので。

宜しくお願いします。

[com2]

まず、「このデザインはCSSでどうやって書くんだろう？」と疑問に思った時は、Firefox拡張のFirebugやChromeブラウザの開発ツールなどを利用し、実際にその部分で適用されているCSSを確認するようにしましょう。
デザイナーの意図が汲め、CSSの勉強にもなります。下記の記事がツールの扱い方で参考になります。
http://miracleblues.blog46.fc2.com/blog-entry-233.html
http://gihyo.jp/dev/feature/01/devtools/0001

次に、簡単なリストマーカーの分け方を。
例えば #menu の中にリストを展開した場合、ざっくり書くと次のような記述で実現できます。

#menu li {list-style-type:disc;} // 1階層目
#menu li li {list-style-type:circle;} // 2階層目以降

[modxfan]

ありがとうございます。助かります。
できました！！

益子さんの新旧両方の本にもliのコーナーに入れ子の記載方法無いし、ネット検索しても出てこないし、
modxデモサイトである、
http://demo.modx.jp/
を見て、普通にソースコードみてひも解こうとしても記載がわからないし、と思っていて困っていたのですが、
なんとたったそれだけだとは・・・・・
どこかに一括して書いてないものかな・・・・・
ファイアフォックスのプラグインも入れてみました。ソースが両方みれて便利ですね。
ただ、でもサイトのサイトマップ表示の
http://demo.modx.jp/47.html
これを見てもなぜかご案内いただいたソースはCSSのほうにでてきませんでしたが。
入れ子のliをクリックして出るCSSのハイライトには、ulの記述になっていました。
継承元
ul
.content ul
についてです。どうなってんのかな？？
周辺スクロルしてもliは書かれていないし、ちょっとよくわかんなかったですが、たぶん操作知識の習得が要るのでしょう。
ありがとうございました

[com2]

私の投稿ではリストマークの指定をCSSで明示しましたが、ブラウザの標準設定では、何も指定しないと ●→○→■ の順番でマークされます。
下記サイトでは list-style-type を明示していません。
http://www.dspt.net/html_tag/007_data/001.html
http://www.tagindex.com/stylesheet/list ... ding2.html

デモサイトの例は、.content ul に list-style-type を指定しているため、それ以降の全ての階層でリストマークが ■ となるわけです。
これも正しい挙動です。
ul に指定するか li に指定するかはデザイン意図次第ですが、順序付きリストの事を考えると ul に指定した方がよいと思います。
（私は li に色々装飾する事が多いので、先の例では li に指定してみました）

私が挙げた例に沿えば、下記のように記載しても大丈夫です。
#menu ul {list-style-type:disc;}
#menu ul ul {list-style-type:circle;}
逆に、ブラウザの標準設定にまかせるならば、list-style-type は指定しないでください。

このままではMODxと関係ないCSS講座になってしまいますので、まずはCSSに関する本やサイトなどで、CSSの各記述の構造や意味を学習される事をお勧めします。