意外と便利なCSS3の":nth-of-type"

　CSSで追加されたCSSセレクタ（擬似クラス）に":nth-of-type(n)"というのがある。

　「n番目に現れる要素にスタイルを適用する」というやつだ。

　最初見た時は「何だこれ？」と思ったが、意外と便利だ。例えばテーブルの３列目にだけ要素を適用したいのなら、

TR>TD:nth-of-type(3) { … }

　
という様に書く。"2nd-of-type" ではなく、"nth"の部分はそのまま"nth"と書いて、カッコの中の引数に数字を書く。念のため。

:nth-of-type(odd)　･･･　奇数番目の要素に適用
:nth-of-type(2n+1)　･･･　奇数番目の要素に適用
:nth-of-type(even)　･･･　偶数番目の要素に適用
:nth-of-type(2n)　･･･　偶数番目の要素に適用
:nth-of-type(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-of-type(3n+1)　･･･　1,4,7,10…番目の要素に適用
:nth-of-type(-n+3)　･･･　最初の3つの要素に適用
:nth-child(n+3)　･･･　最初の3つの要素以外に適用 

なんてこともできる。

　「テーブルの特定の列だけにスタイルを適用したい」といった場合、CSS2の書き方だと全行の TD タグにクラス名を設定して、クラスに対してスタイルを適用するという書き方になるが、それだとソースが肥大になり、しかも見づらい。（特定の「行」に対してなら TR タグにクラスを付けておけばいいのでまだラクなんだけどね。）

　それが、nth-type-of を使うと HTML のソースがシンプルに書けることになる。

　私が管理しているとあるページでも、 class タグが大量に設定された読みづらいTABLEのHTMLソースを書き換えて、以下の様なCSSを定義してみた。

TR>TD:nth-of-type(2) {font-size:8pt;}
TR>TD:nth-of-type(n+3){@extend .small;}
TR>TD:nth-of-type(-n+4) {white-space: nowrap;}

　ちなみに2行目はSassというものを使っているので、普通に書いただけじゃ動かない。SassとはCSSを記述するための言語(メタ言語)の一つであり、同言語で記述したファイルをCSSファイルへ変換するソフトウェアである。@extend とは別に定義されているスタイルを継承するものであり、今回はもともとクラスに対して使っていたスタイルをそのまま用いた。Sassも便利なものだが、詳しい紹介は気が向いたらということで。

　今回は nth-type-of を紹介したが、某所にある「意外と知らない!?CSSセレクタ20個のおさらい」というページで、旧来のものも含めて色々と載っており、非常に参考になる。意外と忘れてるセレクタもあるんだよな。というわけで、興味のある方はそちらのページもどうぞ。