<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>をCSSで"へのTwitter上でのコメントやRT
3件のツイートがあります。
ツイート 1
<ol start>をCSSで [http://asamuzak.jp/html/51] またIE非対応かよ…
ツイート 2
古い投稿への自己注釈。start属性はHTML5で復活したので、その文書型なら大手をふって使える。 http://t.co/uvz1wLAr4e / asamuzaK.jp : <ol start>をCSSで http://t.co/H0Dta8hJsJ
ツイート 3
ちょうど10年前にこんなの書いてた…w asamuzaK.jp : <ol start>をCSSで https://t.co/H0Dta8hJsJ