HTMLのテーブルでのnth-childセレクタの使用方法

HTML CSS

HTMLのテーブルでのnth-childセレクタの使用方法

nth-childセレクタは、HTMLのテーブル内で特定の行やセルをターゲットにするのに非常に便利です。
このセレクタを使用すると、CSSで動的にスタイルを変更できます。
具体的な使用方法を以下で説明し、HTMLとCSSのコード例を提供します。
例として、クラス名はtest-で始めることにします。

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>テーブルのnth-childセレクタ例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header">ヘッダー1</th>
        <th class="test-header">ヘッダー2</th>
        <th class="test-header">ヘッダー3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="test-row">
        <td class="test-cell">データ1</td>
        <td class="test-cell">データ2</td>
        <td class="test-cell">データ3</td>
      </tr>
      <tr class="test-row">
        <td class="test-cell">データ4</td>
        <td class="test-cell">データ5</td>
        <td class="test-cell">データ6</td>
      </tr>
      <tr class="test-row">
        <td class="test-cell">データ7</td>
        <td class="test-cell">データ8</td>
        <td class="test-cell">データ9</td>
      </tr>
      <tr class="test-row">
        <td class="test-cell">データ10</td>
        <td class="test-cell">データ11</td>
        <td class="test-cell">データ12</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSSファイル (styles.css)

このファイルには、テーブルの各部分に対するスタイルが含まれています。
nth-childセレクタを使用して、特定の行やセルに異なるスタイルを適用します。

.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header {
  background-color: #f2f2f2;
  padding: 10px;
  border: 1px solid #ddd;
}

.test-cell {
  padding: 10px;
  border: 1px solid #ddd;
}

/* 奇数行のスタイル */
.test-row:nth-child(odd) {
  background-color: #f9f9f9;
}

/* 偶数行のスタイル */
.test-row:nth-child(even) {
  background-color: #ffffff;
}

/* 2列目のセルのスタイル */
.test-row td:nth-child(2) {
  font-weight: bold;
  color: #333;
}

詳細な説明

1. HTMLファイル (index.html):

  • table要素には、test-tableというクラスが付けられています。

テーブルの列ヘッダーにはtest-headerクラスが付けられており、各データ行にはtest-rowクラスが付けられています。
各データセルにはtest-cellクラスが付けられています。

2. CSSファイル (styles.css):

  • .test-tableはテーブル全体のスタイルを設定します。

border-collapse: collapse;は、テーブルのセルの境界線が重ならないようにします。

  • .test-headerクラスは、テーブルのヘッダーセルに背景色、パディング、境界線を設定します。
  • .test-cellクラスは、データセルにパディングと境界線を設定します。
  • .test-row:nth-child(odd)セレクタは、奇数行に背景色を設定します。
  • .test-row:nth-child(even)セレクタは、偶数行に別の背景色を設定します。
  • .test-row td:nth-child(2)セレクタは、2列目のセルにフォントウェイトを太字にし、文字色を設定します。

このように、nth-childセレクタを使うことで、テーブルの行やセルに対して柔軟にスタイルを適用することができます。
特定の行や列に対して異なるスタイルを設定することで、視覚的な区別をつけたり、ユーザーにとって読みやすいデザインを実現できます。