番号付きリストの番号に装飾したい

0   名前： さち ： 2007/03/07（水） 10:55  ID:NBB2hMtu sub-bK
【何をしたいのか】
olタグで出来る番号付きリストの、番号の部分を装飾したいです。
例えば　1. テスト文章です。　この1.の部分のことです。

【何をしてみたのか】
スタイルシートの疑似要素、first-letter（ブロック要素内の先頭1文字のスタイル）が関係あるかと思い、テストで
li:first-letter{
	color: #ff0000;
}
としてみましたが、番号の色が赤に変わるのではなく、文章の先頭1文字が赤に変わりました。

もしかして、番号に装飾は出来ないのでしょうか？教えていただけるとうれしいです。
1   名前： 匿名 ： 2007/03/07（水） 10:55  ID:Z/T9lFdK sub-kJ
リストマーカは display: marker を持つ特別なボックス（しかも CSS2.1 で削除されてしまった）。

Gecko、Opera なら counter プロパティに対応しているので、いったんマーカを消して、改めて連番を振れば良い。
ol { counter-reset: item; }
li { list-style: none; }

li:before {
  content: counters(item, ".");
  counter-increment: item;
  color: red;
}

IE7- は駄目なので、どうしてもやりたければ数字ごと地道に書いていくしかない。
2   名前： さち ： 2007/03/07（水） 10:55  ID:NBB2hMtu sub-bK
＞匿名さま

ありがとうございます。

教えてくださったソースで試してみましたところ
自分の望む表示が出来ました。

ですが、IEに対応していないとなると
使うのは難しそうです。

地道に数字を書こうと思います。

今回はありがとうございました。
これで解決とさせていただきます。
一覧へ戻る