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

2023年2月25日

環境
Google Chrome　109.0.5414.120
Windows 10 Home 64bit

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

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 /*奇数の行にCSSを適用*/
  tr:nth-child(2n + 1) {
     background-color:blue;
  }
</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>

実行結果
奇数の行の背景色は青になります。

CSS

Posted by arkgame

関連記事: