CSS セレクターを使用してテーブル内の特定の列範囲をターゲットにする方法

特定の列範囲の CSS セレクター

この質問は、CSS セレクターを、テーブル。元のセレクター .myTableRow td:nth-child(?) は、テーブル行内の位置に基づいて特定の子要素をターゲットにします。ただし、質問ではセレクターを列 2 から 4 に適用する方法を求めています。

回答で示唆されているように、1 つのアプローチは次のセレクターを使用することです:

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

このセレクターのターゲットmyTableRow クラスの行内の 2 番目以降の子から 4 番目までのすべてのテーブル セル (td)。これにより、必要な範囲の列が効果的に選択されます。

このアプローチのもう 1 つの利点は、テーブル内の列の合計数に縛られないため、その堅牢性です。存在する列の数に関係なく機能します。

セレクター構文の説明:

• :nth-child(n X): すべての子を選択します。 X 番目の位置以降。
• :nth-child(-n X): X 番目の位置までのすべての子を選択します。

これらのセレクターを組み合わせると、以下の範囲に含まれる要素がターゲットになります。提供されたコード例に示されているように、特定の範囲。

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