CSS nth-child で要素の範囲を選択するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-26 05:25:30

オリジナル

242 人が閲覧しました

How to Select a Range of Elements with 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 サイトの他の関連記事を参照してください。