週末、Jenkinsをさらに痛く改造するためCSSを弄っていて、テーブルの行にスタイルを当てようとしたのだが、一行目のtrがヘッダ行になっていて、class指定やtheadタグも無いのでヘッダ行とそれ以外を区別する術がなくて困った。なんとか２つ目以降のtrタグにスタイルを適用できないものかと調べてみたところ、CSS3の nth-xxxx という疑似クラスを使えば可能らしい事が分かった。
しかし、この nth-xxxx の使い方が実に分かりにくい、というか公式のドキュメントを含めて、まともな説明がひとつもない…。というわけで使って分かった事を書いてみる。仕様書は一切読んでないので正しいかどうか知らん。
nthシリーズは自分の兄弟要素の位置関係から要素をセレクトする疑似クラスで、-of-typeと-childがある。
:nth-of-type(n) :nth-last-of-type(n) :nth-child(n) :nth-last-child(n)
何番目と数える時に、childでは兄弟要素全部を数え、of-typeでは自分と同じ要素だけ数える。lastが付いた場合は後ろから数える。
というわけで
<div> <span>あ<span> <span>い<span> <em>う</em> <span>え<span> <span>お<span> </div>
のとき
div span:nth-of-type(3) {} div span:nth-child(4) {}
とすると、いずれも「え」のspanタグが対象になるようだ。んで、2つ目以降のspanを選択（「い、え、お」を選択）したいならば
div span:nth-of-type(n+2)
とすればいい。なんでn+2を指定するのか分かりにくいのだが、こういう事。
まずカッコに指定できるのは an+b という式。aとbは整数（0や負でもいい）とする。なので、
:nth-of-type(-n+4) :nth-last-of-type(2n+1) :nth-child(2n) /* a = 2, b = 0 */ :nth-last-child(4) /* a = 0, b = 4 */ :nth-child(n+3)
というような指定が可能。で、この式の n に 0,1,2,3,4,.... を代入していくと上から順に
3,2,1,0,-1, ... 3,4,5,6,7, ... 1,3,5,7,9, ... 0,2,4,6,10, ... 4,4,4,4,4, ... 2,3,4,5,6, ...
となる。この数字が選択される要素の位置となるらしい。分かってしまえばどうという事はないが、なんともプログラマ向けな仕様である（ただし最初の要素のインデックスは1であって0ではない点は非プログラマ的）
