olタグのナンバリングをカッコつきにする

単純に(1)になればいい

kakko.css

ol {
  list-style-type: none;
}

ol li {
  counter-increment: cnt;
}

ol li:before {
  content: "(" counter(cnt) ") ";
}

()部分が、list-style-position:insideてきな扱いになるのが嫌

kakko-outside.css

ol {
  list-style-type: none;
  margin-left: 3em; /* いい塩梅の幅を設定したまえ */
}

ol li {
  counter-increment: cnt;
}

ol li:before {
  content: "(" counter(cnt) ") ";
  display:inline-block;
  margin-left:-3em; /* いい塩梅の幅を設定したまえ */
  width: 3em; /* いい塩梅の幅を設定したまえ */
}

ol > li の start属性を使いたい

以下のhtmlをカッコつきで表示したいとき、第二シーズンのstart属性が無視されて、1～の表示になっちゃう。

kakko.html

<h1>第一シーズン</h1>
<ol start="1">
  <li>マックス誕生</li>
  <li>殺人スポーツ・レイキング</li>
  <li>謎の人体バンク</li>
</ol>

<h1>第二シーズン</h1>
<ol start="4">
  <li>天才少年養成アカデミー</li>
  <li>美人伝道師の誘惑</li>
  <li>宿敵グロスバーグの逆襲</li>
</ol>

しょうがないので、jQueryで無理やり書き換えちゃう。

kakko.js

$("ol").each(function() {
  var start = $(this).attr("start");
  start = start - 1;
  $(this).css({
    'counterReset': 'cnt ' + start
  });
});

しっかり見てないけど、IE8以降ぐらいなら動くんじゃないかな。

関連リンク

イカ
アイドル
夢がひろがる