CSS nth-child(2n)で偶数の行にCSSを適用する

環境
Google Chrome　109.0.5414.120
Windows 10 Home 64bit

構文
セレクタ:nth-child(2n){
}
同じ親要素を持つ子要素の偶数の行に適用します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 /*偶数の行にCSSを適用*/
  tr:nth-child(2n) {
     background-color:red;
  }
</style>
</head>
<body>

<table border="1">
  <tr><td>東京</td></tr>
  <tr><td>大阪</td></tr>
  <tr><td>福岡</td></tr>
  <tr><td>横浜</td></tr>
</table>

</body>
</html>

実行結果
偶数の行の背景色(red)が変わります。

CSS

Posted by arkgame