掲示板/スタイルシート質問板/過去ログ/一覧/ 番号付きリストの番号に装飾したい

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に対応していないとなると
使うのは難しそうです。

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

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