おっどだかいーぶんだか（何かの呪文）【追記】タグの間違いを修正

CSS3のnth-childが素晴らしいと思った今日この頃。というか昨日初めて知りました←
セレクタの一つなんですが、どうやらテーブルとかリストの各行の設定が個別で出来るようになったらしいです。




というのは、最近ちょいと所用でスタイルシートを弄っているわけですが、お隣の席の依頼主さんから

「この表って交互に色変えられない？」

なんていう注文が。


JSP画面を作っていて、テーブルをforEachで回して列に値を格納～～なんて事をやっていた最中だったのですが、スタイルシートを交互に適用させるくらいしか思い当たりません。
そんな話をしていたところ、某お方から「nth-child」というセレクタを使えば可能らしいという情報をゲット。



とりあえずこんな感じらしいです↓

---

<table class="tableStyle">
<tr>
<th colspan="2">今月買った漫画</th>
</tr>
<tr>
<td>8/4</td>
<td>べるぜバブ(7)</td>
</tr>
<tr>
<td>8/4</td>
<td>REBORN(30)</td>
</tr>
<tr>
<td>8/4</td>
<td>BLEACH(46)</td>
</tr>
<tr>
<td>8/4</td>
<td>NARUTO</td>
</tr>
<tr>
<td>8/5</td>
<td>会長はメイド様(11)</td>
</tr>
<tr>
<td>8/5</td>
<td>恋だの愛だの(1)</td>
</tr>
<tr>
<td>8/12</td>
<td>鋼の錬金術師(26)</td>
</tr>
</table>

---

ひとまずこんなテーブルを用意。
データに対するツッコミはスルーの方向で。


これに、以下のスタイルシートを適用させてみます。

---

/* 枠に隙間が開かないように */
tr {
padding: 0px;
margin: 0px;
}

/* テーブルタグに付けるスタイル */
.tableStyle {
border-collapse: collapse; /* 枠線を結合(見えないから意味は無い) */
}

/* 基数行の設定(↑を継承) */
.tableStyle tr:nth-child(odd) {
background-color: #FFFFFF; /* 背景色：白 */
}

/* 偶数行の設定(同上) */
.tableStyle tr:nth-child(even) {
background-color: #FFE6D7; /* 背景色：薄いオレンジ */
}

/* 1行目の設定(同上) */
.tableStyle tr:nth-child(1) {
background-color: #FF7E59; /* 背景色：濃いオレンジ */
}

---

---

※スクショ




こんな感じに。

nth-childというセレクタが色々やってくれるらしいんですが、この()の中に色々入れられるようです。
形式としては基本は

a n + b

で、aとbには数字が入ります。nだけはnのままね。例えば「2n+1」とか。
直接数字を書き込めば指定行(1始まり)の設定もできます。

今回使ったのは

* odd (奇数)
* even(偶数)

これ。


それから、nth-last-childセレクタを使うと、名前通りに最後の列の設定ができたりするようです。



CSS3の対応とやらがまだまだらしいんですが、FireFoxでもちょこちょこ増えてってるらしいので色々調べてみたいと思います。
（当然と言うかなんというか、IEは未対応）



いいよねこういうの。創作意欲的な何かが刺激されます(*´∀｀*)