CSS `nth-child` セレクターを使用してテーブル内の特定の列を選択する方法

n 番目の範囲の CSS セレクター

テーブル内の特定の列を選択するには、n 番目の子 CSS セレクターを利用します。提供されたセレクター '.myTableRow td:nth-child(?)' は、親テーブル行内の位置に基づいてテーブル データ セル (td) をターゲットにします。ただし、疑問符のプレースホルダーは範囲に置き換える必要があります。

n 番目の子の範囲選択

列 2 ～ 4 を選択するには、次のいずれかの方法を使用します。

オプション 1:

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
  background-color: #FFFFCC;
}</code>

この構文では、2 番目の位置 (n 2) から 4 番目の位置 (-n 4) までのセルが選択されます。

オプション 2 (より明確な構文):

<code class="css">.myTableRow td:nth-child(2):nth-child(4){
  background-color: #FFFFCC;
}</code>

この代替案では、列 2 と列 4 を明示的に識別する、より明示的な範囲指定が提供されます。列の合計数。

nth-Child 構文の説明:

• ':nth-child(n X)' は、'X' 番目の位置からの要素をターゲットとします。
• ':nth-child(-n X)' は、'X' 位置までの要素を対象とします。

例:

次の HTML について考えてみましょう:

<code class="html"><table class="myTable">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table></code>

セレクター '.myTable tr:nth-child(2)' を適用すると、テーブルの 2 行目が強調表示されます。

以上がCSS `nth-child` セレクターを使用してテーブル内の特定の列を選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。