はじめに

以前ul li のリスト部分のみ色を変更する方法　2パターンでリスト部分のみに色を変える方法を紹介しましたが、今回はolliで挿入される数字部分のみに色を変える方法を紹介します。

仕上がりイメージ

数字部分を赤、テキストを青で表示させています。

目次

spanでテキストの色を変更する方法

これはul li のリスト部分のみ色を変更する方法　2パターンで紹介した方法と同じです。

li内をspanで囲んで、span部分の色を指定する事で、色を変化させます。

HTML

<ol class="test01">
　<li><span>いちばんめ</span></li>
　<li><span>にばんめ</span></li>
　<li><span>さんばんめ</span></li>
</ol>

CSS

ol.test01 li {
　color:red;
}
ol.text01 li span {
　color:blue;
}

方法としては簡単なのですが、リストを追加する度にspanで囲む必要があるので、更新の時に若干面倒かな、というのが印象です。

olliで自動挿入される数字の色を変更する方法は思いつく限りではこれのみで、以下は疑似要素を利用して数字を表示させる方法となります。

olliで自動挿入される数字の色を変更する方法は思いつく限りではこれのみで、以下は疑似要素を利用して数字を表示させる方法となります。

疑似要素で数字を挿入する方法

こちらは、CSSの疑似要素内にあらかじめ数字が入るように準備をしておいて、疑似要素内のみ色を変える、という方法になります。

具体的には、疑似要素内にcounter-incrementプロパティを設定し、カウンターを自動で増加させ、contentでそのカウンターを表示させる、という方法です。

HTML

<ol class="test02">
　<li>いちばんめ</li>
　<li>にばんめ</li>
　<li>さんばんめ</li>
</ol>

CSS

ol.test02 {
　list-style:none;
　counter-reset: test02_number;
}
ol.test02 li {
　color: blue;
}
ol.test02 li &:before {
　counter-increment: test02_number; /*「test02_number」は任意の物でOK*/
　content: counter(test02_number);
　color: red;
}

できあがったもの

ご覧のとおり自動で数字が入り、数字部分のみ色が変わりました。

しかし、よく見ると<ol>で数字を表示させた場合と違い、数字に「.」が付いていません。

パターン1のように数字に「.」を入れたい（任意の文字列を入れたい）時は、contentを以下のように記述します。

CSS

content: counter(test02_number)".";

できあがったもの

出力させたい文字列をcontentの任意の場所を「””」で囲めばOKです（counterの前にも設定できます）。

注意点は、親要素にカウンターをリセットさせるcounter-resetプロパティを設定する必要がある点です。

この方法は、数字を<ol>同様に自動的に挿入でき、任意の文字列も追加できるのでオススメです（疑似要素を使うので<ol>ではなく<ul>でも設定できます）。