HTMLとCSSのメモ（コピペ用）
HOMEに戻る

奇数行毎、または偶数行毎に背景色を設定する

CSS

リストの行の背景色を交互に変える

CSS
li:nth-child(even){
  background-color: #f00;
}

上記例は、偶数行毎に背景色を変更。
・奇数行は :nth-child(odd)　または　:nth-child(2n+1)
・偶数行は :nth-child(even)　または　:nth-child(2n)

テーブルの行の背景色を交互に変える

例）奇数行のtdの背景色を白、偶数行のtdの背景色をグレーにする

CSS
td{
  background-color: #fff;
}
tr:nth-child(even) td{
  background-color: #ccc;
}
HTML
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>値</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaaaaa</td>
      <td>0000000000</td>
    </tr>
    <tr>
      <td>bbbbbb</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>cccccc</td>
      <td>2222222222</td>
    </tr>
  </tbody>
</table>

上記例は、一旦すべてのtdの背景色を白にしておき、偶数行のtdのみ背景色グレーに。