CSSで奇数にだけクラスを当てる場合の書き方

CSS SCSS

CSSで奇数にだけクラスを当てる場合の書き方

CSSで奇数の要素にだけクラスを当てる場合、擬似クラス :nth-child を使うことができます。
特に :nth-child(odd) を使用することで、奇数の位置にある要素にスタイルを適用できます。

以下に、具体的な例を示します。
この例では、HTMLのテーブルの行に奇数行だけに特定のスタイルを適用する方法を説明します。

HTMLファイル（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奇数行にスタイルを適用</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td>
        <td>データ2</td>
      </tr>
      <tr>
        <td>データ3</td>
        <td>データ4</td>
      </tr>
      <tr>
        <td>データ5</td>
        <td>データ6</td>
      </tr>
      <tr>
        <td>データ7</td>
        <td>データ8</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル（styles.css）

.test-table tr:nth-child(odd) {
  background-color: #f2f2f2;
}

解説

  • tr:nth-child(odd) は、tr 要素の中で奇数の位置にある行にスタイルを適用します。

具体的には、1行目、3行目、5行目などが対象となります。

  • background-color: #f2f2f2; は、奇数行に淡いグレーの背景色を設定する例です。

このスタイルを変更することで、テーブルの見た目をカスタマイズできます。

この方法を使用すると、奇数の行にだけスタイルを適用することができます。