「CSS入門」nth-childで奇数の行を設定するサンプル

2020年7月2日

構文
:nth-child(2n+1)
:nth-child(odd)

CSSコード

table{width:100px}
td{border:1px solid #000000;}

tr:nth-child(2n+1)  {
    background-color: green;
}

htmlコード

<table>
      <tr><td>tokyo</td></tr>
      <tr><td>oosaKa</td></tr>
      <tr><td>fukuoka</td></tr>
      <tr><td>yokohama</td></tr>
      <tr><td>1111</td></tr>
</table>