【CSS】テーブルの背景色を交互に変える

投稿日時: 投稿者:

CSSでテーブルの背景色を変えるシステム開発備忘録です。
と言うは、極たまにしか使わないので、忘れてしまうことが多くて。。。

<html>
<head>
  <style>
    #tableA tr:nth-child(odd) td {  
      background-color: #FF8888;  
    }
    #tableA tr:nth-child(even) td {  
      background-color: #88FF88;  
    }  
  </style>
</head>
<body>
  <table id="tableA">
    <tr>
      <td>セルA1</td><td>セルA2</td><td>セルA3</td>
    </tr>
    <tr>
      <td>セルB1</td><td>セルB2</td><td>セルB3</td>
    </tr>
    <tr>
      <td>セルC1</td><td>セルC2</td><td>セルC3</td>
    </tr>
    <tr>
     <td>セルD1</td><td>セルD2</td><td>セルD3</td>
    </tr>
    <tr>
      <td>セルE1</td><td>セルE2</td><td>セルE3</td>
    </tr>
   </table>
  </body>
</html>

これは、疑似クラスの:nth-child(n)を使っています。
まず、疑似クラスとは、要素が特定の状態にある場合にスタイルを指定するものです。

例としてよく使われているaタグに使う疑似クラスを挙げます。
a:link{}
リンクする要素(ａ要素)のうち、まだ見ていない（キャッシュされていない）要素に対してスタイルを適用させます。
a:visited{}
リンクする要素(ａ要素)のうち、既に見た（キャッシュされている）要素に対してスタイルを適用させます。

今回のnth-child(n)は疑似クラスは指定した要素内のn番目の子要素にスタイルを適用することができます。
nにはodd、evenの他に数字や2nのように計算式を入れる事もできます。

#tableA tr:nth-child(odd) td で記述したセレクタは、
#tableAのtrのnth-child(odd)奇数行の状態にあるtdに対して、スタイルを適用することになります。

この辺りの詳細な説明は、ググってもらった方が良いですね。

尚、古いブラウザでは動かないことが有ります。例えばIE8とかの古いブラウザとかでは。
この辺りも別途考慮の必要？が有るなら調べて使用してください。

以上、【CSS】テーブルの背景色を交互に変える、CSSの備忘録でした。