nth-childを使ってテーブルのth要素に対して条件分け操作をする方法

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 {

装飾指定

}

コメントを残す