ＣＳＳで２階層にカウンター設置

概要：箇条書き等の２階層リスト表（Ｐタグ）に各階層の行頭に自動的に連番を設定するＣＳＳカウンタの事例です。

<div class="kn_two_layers">
  <p>第１階層　１行目</p>
  <div>
    <p>第２階層　１行目</p>
    <p>第２階層　２行目</p>
  </div>
  <p>第１階層　２行目</p>
  <div>
    <p>第２階層　１行目</p>
    <p>第２階層　２行目</p>
    <p>第２階層　３行目</p>
  </div>
  <p>第１階層　３行目</p>
  <div>
    <p>第２階層　１行目</p>
    <p>第２階層　２行目</p>
    <p>第２階層　３行目</p>
    <p>第２階層　４行目</p>
  </div>
</div>

事例のＣＳＳ

    /* ２階層表示 */
.kn_two_layers div{margin-left:30px;}
.kn_two_layers p{padding-left:2em; text-indent:-2em;}

/* ===== Ｐタグ　カウンタ 第一階層 ===== */
.kn_two_layers{                       /* カウンタ設置 */
  counter-reset:ctr 0;                   /* 名前付、初期値 */
}
.kn_two_layers p:nth-of-type(n+1){    /* ｐの最初から最後迄 */
  counter-increment:ctr;                 /* カウンタに＋１ */
}
.kn_two_layers p:nth-of-type(n+1)::before{   /* カウンタ値の表示 */
  content:counter(ctr)" ．";
}

/* ===== Ｐタグ　カウンタ 第二階層 ===== */
.kn_two_layers > div{
  counter-reset:ctr_2 0;
}
.kn_two_layers > div > p:nth-of-type(n+1){
  counter-increment:ctr_2;
}
.kn_two_layers > div > p:nth-of-type(n+1)::before{
  content:counter(ctr_2)" ）";
}

ＣＳＳ説明・第２階層カウンタの設置。