:nth-child()で作るゼブラデータテーブル

基本を押さえたところで、早速:nth-child()擬似クラスを使用して、図6のような、1行ごとに背景色を変えたゼブラテーブルを作成してみましょう。

図6：ゼブラテーブル

CSS2.0でこれを実現しようとすると、1行ごとのtr要素に、class="even"あるいはclass="odd"というような記述を付け足してあげる必要がありました。CSS3であれば、tr:nth-child(even)で偶数行、:nth-child(odd)で奇数行というようにスタイルの適用先を簡単に指定できるため、HTML側にスタイルのためのコードを追記する必要はありません。

［リスト11］ゼブラテーブルのHTMLソース（table.html）

<table>
<caption>CSS3で追加されたセレクタのIE6～8およびjQueryの対応状況</caption>
<thead>
<tr><th>パターン</th><th>概要</th><th>IE6</th><th>IE7</th><th>IE8</th><th>jQuery</th></tr>
</thead>
<tbody>
<tr><td>E[foo^="bar"]</td><td>属性「foo」の値が「bar」と前方一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>E[foo$="bar"]</td><td>属性「foo」の値が「bar」と後方一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>E[foo*="bar"]</td><td>属性「foo」の値が「bar」と部分一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
～中略～
<tr><td>E:last-of-type</td><td>兄弟関係にあるもののうち最後のE要素</td><td>×</td><td>×</td><td>×<<tr><td>E ~ F</td><td>E要素の後に出現するF要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr></tbody>
</table>

CSSも、とてもシンプルで簡単です。例では、tr:nth-child(even)として、偶数行に対して、薄い青色（#f7f7fb）の背景色を適用しています。

［リスト12］CSSソース：偶数行に背景色を指定（table.css）

tr:nth-child(even) {

  background-color: #f7f7fb;

}

未対応のブラウザをjQueryで補完

前項同様、:nth-child()に対応していないブラウザには、jQueryを利用して対応しましょう。table.jsのコードは次のようになります。

［リスト13］未対応ブラウザ用コード（table.js）

$(function(){
  $("tr:nth-child(even)").css("background-color", "#f7f7fb");
});

サンプルでは、さらに見出しの背景をlinear-gradient関数でグラデーションにしています。

［リスト14］CSSソース：見出しにグラデーションを指定（table.css）

th {
  color: #ffffff;
  background: -moz-linear-gradient(top, #0000ff, #0066ff);
  background: -webkit-gradient(linear, left top, left bottom, from(#0000ff),to(#0066ff));
  background: linear-gradient(top, #0000ff, #0066ff);
  border:1px solid #cccccc;
}

linear-gradient関数に未対応のIEには、独自のfilterプロパティを利用します。

［リスト15］IE専用CSSソース：見出しにグラデーションを指定（ie_table.css）

th {
  background: transparent; /* 背景をリセット */
  -ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0000ff',EndColorStr='#0066ff');
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0000ff',EndColorStr='#0066ff');
}

これで、IEで表示しても、同じような見栄えになります。