<ol start>をCSSで

順序付きリスト(ol要素)でレガシーなstart属性を使わずにCSSで表現する

順序付きリスト(ol要素)にかつてあったstart属性に代わるものとして、CSSの"counter-reset"と"counter-increment"を使えばよいらしい、ということはなんとなく知っていたが、MSIEが未対応だしぃ、と言い訳してうっちゃっていた^^;

実はやり方がよくわからなかっただけなのだが、それがようやく理解できた。

基本的なスタイル指定が仮に下記だったとすると

ol {
    counter-reset : item;
}
ol > li {
    display : block; /* display : list-item を上書き */
}
ol > li:before {
    content : counters(item, '.') '. ';
    counter-increment : item;
}

例えば、<ol start="4">とこれまでだったら指定していたところは、<ol class="count-from-4">とクラス指定したとして、css側は次のようになる。

.count-from-4 {
    counter-reset : item 3; /* 始めたい数字より[1]小さい値に */
}

これだけで良かったのね^^;

なお、MSIEでは意図通りには表示されません (MSIE7でどこまでCSS2に対応するのかも知らない)。

<ol start>をJavaScriptでに続く。

"<ol start>をCSSで"へのTwitter上でのコメントやRT

3件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3