この記事では、特定の位置にある複數(shù)の子要素を同時に選択する方法を中心に、CSS の `:nth-child()` セレクターの使用スキルを紹介します。 `:nth-child()` 自體は複數(shù)の値を直接渡すことをサポートしていませんが、複數(shù)のセレクターを組み合わせることで同様の効果を?qū)g現(xiàn)できます。この記事では、`:nth-child()` セレクターをより深く理解し、適用するのに役立つ詳細なサンプル コードと説明を提供します。

CSS :nth-child() セレクターは、親要素內(nèi)の位置に基づいて要素を選択できる強力なツールです。ただし、単一の :nth-child() セレクターで複數(shù)のインデックス値を指定することは直接サポートされていません。つまり、nth-child(2, 3) のように 2 番目と 3 番目の子要素を直接選択することはできません。ただし、複數(shù)のセレクターを組み合わせることによって、同様の効果を?qū)g現(xiàn)できます。

カンマ區(qū)切りセレクターを使用する

最も簡単な方法は、複數(shù)の :nth-child() セレクターをカンマ (,) で區(qū)切ることです。カンマは CSS の「または」関係を表すため、ブラウザーはいずれかのセレクターに一致するすべての要素にスタイルを適用します。

次のコードは、このメソッドを使用して、親要素 div.modal-content の下の 2 番目と 3 番目の

子要素を選択し、その背景色を赤に設(shè)定する方法を示しています。

 div.modal-content > p:nth-child(2)、
div.modal-content > p:nth-child(3) {
  背景色: 赤;
}

HTML構(gòu)造例

上記の CSS コードの役割をよりよく理解するために、対応する HTML 構(gòu)造の例を次に示します。

 <div class="モーダルコンテンツ">
  <span class="close-button">ボタンの例</span>
  <p>要素 2</p>
  <p>要素 3</p>
  <p>要素 4</p>
  <p>要素 5</p>
  <p>要素 6</p>
</div>

この例では、:nth-child(2) は 2 番目の

要素 (コンテンツ「要素 2」を持つ段落) を選択し、:nth-child(3) は 3 番目の

要素 (コンテンツ「要素 3」を持つ段落) を選択します。

連続していない要素を選択する

上記の方法は、不連続な要素を選択するのにも適しています。たとえば、3 番目と 5 番目の

要素を選択するには、次の CSS コードを使用します。

 div.modal-content > p:nth-child(3)、
div.modal-content > p:nth-child(5) {
  背景色: 赤;
}

:nth-child() の仕組み

:nth-child() がどのように機能するかを理解することが重要です。親要素の下にある n 番目の子要素を選択し、その要素がセレクター (この場合は

要素) と一致するかどうかを確認します。親要素の 2 番目の子要素が

要素ではない場合、:nth-child(2) は要素を選択しません。

代わりに :nth-of-type() を使用してください

特定の型の子要素に基づいて選択する場合は、:nth-of-type() セレクターを使用できます。 :nth-of-type() セレクターは、指定された型の子要素のみを考慮します。たとえば、 p:nth-of-type(2) は、他のタイプの子要素を無視して、親要素內(nèi)の 2 番目の

要素を選択します。

要約する

:nth-child() セレクター自體は複數(shù)のインデックス値の直接指定をサポートしていませんが、複數(shù)のセレクターを組み合わせることで、特定の位置にある複數(shù)の子要素を簡単に選択できます。 :nth-child() セレクターはすべての子の中から n 番目の子要素を選択しますが、:nth-of-type() セレクターは指定された型の子要素のみを考慮することに注意してください。特定のニーズに基づいて適切なセレクターを選択すると、CSS スタイルをより正確に制御できるようになります。

以上が出力形式の要件: CSS の :nth-child() セレクターを使用して複數(shù)の要素を同時に選択しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。