順序リスト[ol]の​数字の​色だけを​変更する

公開

更新

CSSカウンタを使って改めて数字を生成しcolorプロパティを変更する。

HTML
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3
  <ol>
    <li>item01</li>
    <li>item02</li>
    <li>item03</li>
  </ol>
  </li>
  <li>item4</li>
  <li>item5</li>
</ol>
CSS
ol {
  list-style: none;
  counter-reset: ol_li; /* ol_li カウンタをセットする(値もリセット) */
}
ol li:before {
  margin-right: .25em;
  counter-increment: ol_li; /* ol_li カウンタの値に1加える */
  content: counter(ol_li); /* before擬似要素のcontentで出力 */
  color: red; /* 色を変更 */
}

デモページ

CSSカウンタ初めて使った。色変えたりするのはそんなに無いかもしれないけど入れ子にするのはどこかで役に立つかも。

参考