2011年8月25日(木) 23時52分22秒 [仕事]

偶数番目・奇数番目とか「n番目」に限定して装飾するCSS

でかい表とか、長いリストを掲載するときには、1行おきに背景色を変化させると見やすいんですよね。1行おきに、うっすらと灰色の背景色を加えておくだけでも、見やすさが全然違います。
というわけで、ウェブ上に表を掲載するときには、ぜひとも加えておきたい装飾です。

CSS3で新しく追加された『nth-child 疑似クラス』をサポートしているブラウザなら、HTML側にまったく手を加えることなく、スタイルシートだけでそんな装飾が実現できます。
IE9を含め、モダンブラウザの最新版ならどれもサポートしております。

この nth-child疑似クラス というのが、なかなか高機能で、数式っぽい表現を使って装飾対象を限定できます。

• 偶数行だけを装飾　→　nth-child( 2n )
• 奇数行だけを装飾　→　nth-child( 2n+1 )

とか、

• 先頭から3つだけを装飾　→　nth-child( -n+3 )
• 先頭から4番目以降を装飾　→　nth-child( n+4 )

とか。いろいろできて面白いです。
そんな、装飾対象を位置や順序で限定できる nth-child疑似クラスの解説記事をAll Aboutで公開しましたです。

■偶数行・奇数行など「n番目」に限定して装飾するCSS（＠All About ホームページ作成）

「nth-child」疑似クラスの「nth」って何の略だろうかと思ったら、W3Cサイトに『the n-th child of its parent』って書いてありました。
略じゃなくて、「 n番目 」という意味の英語表現なんですね。
辞書で調べたところ、ハイフンなしの「nth」で「n番目」と載っておりました。
「～番目」を表す「th」に、変数「n」をくっつけて、「 n-th 」となるらしいです。
英語では、そういう表現になるんですねえ。

「nth」で辞書を引くと、「n番目の, n倍の, n次の」と意味が載っていました。
英語で普通に使われる表現なんですね。
「n-th」とも書くと紹介している辞書もありましたが、複数の辞書で項目名は「nth」だったので、ハイフンはない方が普通なのかな。

日本語の場合、別に「n番目」でなくても、「x番目」とか「y番目」とか言っても意味は通じると思うんですが、英語では「nth」と書くしかないのでしょうかね……？
と思ったら、

そこは別にi-thでもいいけど、nは(natural) numberの略として自然数が入ることを示唆して使われるのが普通だからかな。

という返信を頂きました。
なるへそ。