【css】「counter-reset」で任意の数字から始める方法

olタグのリスト番号部分を疑似クラスを使い「counter-reset」を使って番号を表示させている時に任意の数字から始める方法

解決方法：専用のclass作成

解決方法としては、専用のclassを付与することで解決する。

ol {
  counter-reset: n;
}
// 2から始める
ol.-num--last_1 {
  counter-reset: n 1
}

…（中略）

// 11から始める
ol.-num--last_10 {
  counter-reset: n 10
}

Scss使っているならで「@for」でclassをまとめて作成

scssを使っているなら繰り返し処理できる「@for」でclassを作成

ol {
  counter-reset: n;
  @for $i from 1 through 10 {
    &.-num--last_#{$i} {
      counter-reset: n $i;
    }
  }

  li {
    &:before {
      content: counter(n);
      counter-increment: n;
    }
  }
}

以下のように出力される

// 2から始める
ol.-num--last_1 {
  counter-reset: n 1
}

…（中略）

// 11から始める
ol.-num--last_10 {
  counter-reset: n 10
}

おまけ：data属性を使って任意の数字から始める

最初はdata属性を使って任意の数字から始めようと思ったんだけど、以下のような書き方だと上手く行かなかった。

<ol data-ol-num="3">
	…
</ol>
<style type="text/css">
ol{	
  &[data-ol-num]{
    counter-reset: n attr(data-ol-num number);
  }
}
</style>

numberはattr()関数の型を数値型と明示する用（しないとstring認識されてしまう）
参考リンク

上手く行くならdata属性を使いたかった。