■テーブルの偶数・奇数の行の色を変える■
かつてはjQueryを使っていた偶数・奇数要素の指定も、今ではCSSだけで可能。実装には :nth-child() を使い、隣接する要素の上から数えて n番目の行を装飾できます。例では奇数行にうっすらと背景に色をつけて読みやすくしています。その他以下のような書き方もできます。
:nth-child(even) … 偶数行に
:nth-child(2n+1) … 奇数行に
:nth-child(odd) … 奇数行に
:nth-child(3n) … 3の倍数行に
また、下から数えて n番目の要素には :nth-last-child() を使って指定できます。
▲ＨＴＭＬ▲
<table>
<tr>
<td>こんな感じで</td>
<td>奇数の行に</td>
</tr>
<tr>
<td>色が</td>
<td>つきます。</td>
</tr><tr>
<td>こんな感じで</td>
<td>奇数の行に</td>
</tr>
<tr>
<td>色が</td>
<td>つきます。</td>
</tr>
</table>
▲ＣＳＳ▲
table {
border-collapse: collapse;
border-spacing: 0;
width: 300px;
}
td {
border:1px solid #999;
padding: 10px;
}
tr:nth-child(odd) {
background: #ddd;
}
body {
padding: 10px;
}