CSS3でnth-childというプログラミングで言うところの簡易なif文のような処理が
出来るようになったそうです。
従来であれば要素にclass属性を指定して、
要素.条件1 {
装飾指定
}
要素.条件2 {
装飾指定
}
のようにしなければならなかったのですが、nth-childを用いると
要素:nth-child(条件) {
装飾指定
}
とすると、条件に合致する要素のみ装飾指定が適用されるというものです。
あくまでもCSS内での話なので条件に指定できるものはそれほど複雑なものは
無理で、偶数・奇数番目、何番目、数式、否定などです。詳しくはググって。
ただ、これにも問題点(?)があって、聞くところによると、隣接している要素に
適用されるということです。このせいで通常でも若干気を使う必要があるみたいです。
今回はテーブルのTH要素に対して偶数・奇数で装飾分けをしたいのですが、
THは構造として
table
└tr
└th
となっていてTHは隣接していないためTHに対してnth-childを使っても思った通りには
動いてくれません。
そこでTRに対してnth-childを指定して条件に合致するTRのTH要素にのみ装飾指定を
するという方法で実現できました。CSSの概要は以下の感じ。
tr:nth-child(条件) th {
装飾指定
}