CSS の :nth-child() セレクターを使用して N 番目ごとの要素を選択するにはどうすればよいですか?

CSS で N 番目ごとの要素を選択する

要素のグループを扱うとき、n 番目ごとの要素をターゲットにすることができます。 CSS は、このタスクを容易にするための :nth-child() セレクターを提供します。

:nth-child(n) を使用すると、親要素内の n 番目の子要素を選択できます。 n 番目の値を指定したり、加算、減算、係数乗算などの算術演算を実行したりすることが可能です。

div:nth-child(4)

このセレクターは 4 番目の div 要素を選択します。ただし、n 番目の要素ごとに個別のセレクターを記述する必要があります。

:nth-child(an) を使用すると、このプロセスが大幅に簡素化されます。 「a」は算術演算を使用して「n」に適用できる係数を表します:

div:nth-child(4n)

このセレクターは 4 つおきの div 要素を選択し、複数のセレクターの必要性を効果的に置き換えます。

より詳細な制御のために、算術式を内で利用できます。セレクター:

• :nth-child(an b)
• :nth-child(an - b)
• :nth-child(a*n)

例: のような他の要素を除外し、div 要素のみを選択するにはh1 または p、:nth-child() の代わりに :nth-of-type() を使用します:

body div:nth-of-type(4n)

注: n を省略した場合、デフォルトは 1 になります。すべての要素を選択します。

4n と 4n の違い4:

どちらのセレクターも 4 番目の div 要素ごとに一致しますが、開始点に微妙な違いがあります。

• :nth-child(4n) は 0 からカウントを開始するため、位置 4、8、12、など。
• :nth-child(4n 4) は 4 から数え始めるため、位置 4、8、12 などの要素を選択します。

以上がCSS の :nth-child() セレクターを使用して N 番目ごとの要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。