CSS nth-child で要素の範囲を選択するにはどうすればよいですか?

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

CSS の n 番目の子セレクターを使用すると、親要素内の位置に基づいて要素を正確に選択できます。ただし、特定の数値で定義されていない範囲にこのセレクターを適用するのは難しい場合があります。

n 番目の子の範囲選択の拡張

次の CSS セレクターを検討してください:

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

このセレクターは、 の範囲に背景色を適用することを目的としています。 内の要素クラス「myTableRow」を使用します。ただし、疑問符 (?) プレースホルダーは範囲を未定義のままにします。

このセレクターを に適用するには、列 2 ～ 4 では、次の CSS を使用できます:

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

拡張セレクターについて

このセレクターは、2 つの追加の n 番目の子サブセレクターを使用します:

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

これら 2 つのサブセレクターを組み合わせることで、2 番目から 4 番目の位置までの要素を含む範囲を効果的に作成します。

使用例

次の HTML テーブルを考えてみましょう。

  

    
column 1
    
column 2
    
column 3
    
column 4
    
column 5
  

強化された CSS セレクターをこのテーブルに適用すると、背景色が 2 番目、3 番目、および 4 番目の 
 に適用されます。 「myTableRow」 内の要素。これは、これらの要素が 2 ～ 4 の定義された範囲内にあるためです。
以上がCSS nth-child で要素の範囲を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。