テーブルの背景色を奇数業と偶数行で塗り分けたい
奇数行と偶数行で交互に色を変えて、シマシマのテーブルを作るとき、「:nth-child(n)」セレクタを使って、テーブル行を交互に塗分けます。非常によく使われるテクニックです。
:nth-child(n)セレクタ
「:nth-child(n)」セレクタは、「〇番目の要素を選択する」セレクタです。()の中に入れる数字、もしくは簡単な数式で、何番目の要素が選択されるかが決まります。
td:nth-child(4)
<td>の親要素、つまり<tr>の子要素のうち、4番目が<td>なら選択されます。同じように「td:nth-child(6)」なら、<tr>の子要素の6番目が<td>なら選択されます。
tbody tr:nth-child(2n)
（）内には、「n」を使った簡単な数式を入れることができます。nは、0、1、2、3、・・・と、0以上の整数を指します。たとえば「2n」と書いたら、「0、1、2、3・・の2倍」、つまり「0、2、4、6・・・番目」の要素が選択されます。また、（）内に数字や数式でなく「odd」「even」というキーワードも使えます。「:nth-child(odd)」の場合は、奇数番目の要素が選択されます。これは、「:nth-child(2n+1)」と同じです。また、「:nth-child(even)」の場合は偶数番目の要素が選択されます。「:nth-child(2n)」と同じです。
「:first-child」、「:last-child」
「:nth-child(n)」と似たようなセレクタ「:first-child」、「:last-child」というセレクタもあります。これらはそれぞれ「最初（1番目）の要素」「最後の要素」を選択します。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サンプルページ</title>
<meta charset="uft-8"><!-文字コードを指定->
<style>
table{
border-collapse:collapse;
width:100%;
table-layout: fixed;
}
td,th{
padding: 6px 20px;
border: 1px solid #b7b7b7;
}
tbody tr:nth-child(2n){
background:#ecfafc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>年月</th><th>酒井営業所</th><th>小湊営業所</th><th>池田営業所</th>
</tr>
</thead>
<caption>東部営業所の売上一覧</caption>
<tbody>
<tr>
<td>2022/1</td><td>500万円</td><td>2,100万円</td><td>250万円</td>
</tr>
<tr>
<td>2022/2</td><td>1,500万円</td><td>300万円</td><td>3,500万円</td>
</tr>
<tr>
<td>2022/3</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/4</td><td>2,500万円</td><td>1,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/5</td><td>2,300万円</td><td>,700万円</td><td>1,500万円</td>
</tr>
<tr>
<td>2022/6</td><td>1,500万円</td><td>1,00万円</td><td>500万円</td>
</tr>
<tr>
<td>2022/7</td><td>500万円</td><td>1,700万円</td><td>1,00万円</td>
</tr>
</tbody>
</table>
</body>
</html>実行結果
