[CSS] 1st, 2nd, 3rd などの序数標識が付く ol を定義する
このブログのランキングページを作るのに、1st、2nd、3rd などと序数標識の付いたリストスタイルを（ネットに落ちていなかったので）作成してみました。説明が面倒なので定義を見て欲しいのですが、before 疑似要素と nth-child 疑似クラスをうまく組み合わせて実現しています。今まで、1～3だけ特別なのかと思っていましたが、その後は同様に下１桁が1～3のとき（11～13を除く）以外は「th」になります。
CSS コード
ol.ranking {
counter-reset: number;
list-style: none;
margin: 0;
padding: 0;
}
ol.ranking li {
padding-left: 3em;
text-indent: -3em;
}
ol.ranking > li::before {
counter-increment:number;
display: inline-block;
width: 2.5em;
text-align: right;
margin-right: 0.5em;
}
ol.ranking > li:nth-child(n)::before { content:counter(number)"th"; }
ol.ranking > li:nth-child(1)::before,
ol.ranking > li:nth-child(10n+21)::before { content:counter(number)"st"; }
ol.ranking > li:nth-child(2)::before,
ol.ranking > li:nth-child(10n+22)::before { content:counter(number)"nd"; }
ol.ranking > li:nth-child(3)::before,
ol.ranking > li:nth-child(10n+23)::before { content:counter(number)"rd"; }
まだ、数字の位置が揃っていないのが気になりますが、この辺りが CSS の限界のようです。もし、content を二重にしたり、その中にタグを入れられたりできれば、もう少しマシにできると思います。数字の位置で縦を揃える方法、序数標識を上付き数字にする方法、これらが分かる人はコメントください（タグでゴリゴリ書くのはナシで）。
使用例
以下に使用例（Wikipedia より）を示しますが、このブログのオリジナルサイトでしか表示されないと思います。
- ウェスタールンド1-26
- はくちょう座V1489星
- いっかくじゅう座V838星
- WOH G64
- いて座VX星
- ケフェウス座V354星
- いて座KW星
- はくちょう座KY星
- おおいぬ座VY星
- ガーネット・スター（ケフェウス座μ星）
- さそり座AH星
- ケフェウス座RW星
- カシオペヤ座PZ星
- IRC-10414
- りゅうこつ座EV星
- りゅうこつ座RT星
- ケフェウス座VV星A
- りゅうこつ座V602星
- ペルセウス座S星
- ベテルギウス（オリオン座α星）
- カシオペヤ座V509星
- いっかくじゅう座V838星 (en)
- カシオペヤ座TZ星
- ペルセウス座RS星
- りゅうこつ座V382星
- アンタレス（さそり座α星）
- ぎょしゃ座NO星
- おおいぬ座VY星
- (Massey-Levesque-Plez Model)
- ペガスス座S星
- ケフェウス座T星
- オリオン座S星
- うみへび座W星
- おうし座CE星
- カシオペヤ座R星
- ペルセウス座T星
- おおいぬ座δ星
- はくちょう座χ星
- ヘルクレス座α星
- カシオペヤ座ρ星
- ミラ（くじら座ο星）A
- りゅうこつ座η星
- かじき座S星
- かじき座R星 (en)
- りゅうこつ座HR星 (en)
- しし座R星
- ピストル星
- りょうけん座Y星
- はくちょう座γ星
- デネブ（はくちょう座α星）
- カシオペヤ座6番星
- LBV 1806-20
- ぎょしゃ座ε星A
- ぎょしゃ座ζ星
- ペガスス座ε星
- みなみじゅうじ座γ星
- アンドロメダ座γ星
- うさぎ座α星
- リゲル（オリオン座β星）
- りゅうこつ座ε星
- かんむり座R星
- カノープス（りゅうこつ座α星）
- オリオン座δ星
- オリオン座ζ星
- ペルセウス座α星
- ふたご座ζ星 (en)
- わし座η星
- りゅう座γ星
- アルデバラン（おうし座α星）
- こぐま座β星
- アルビレオ（はくちょう座β星）A1
0 件のコメント