:nth-child() を使用して CSS 内の N 番目ごとの要素を効率的に選択するにはどうすればよいですか?

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

要素のセットを扱う場合、多くの場合、特定の要素を一定の間隔で選択する必要があります。たとえば、4 番目、6 番目、または 10 番目の要素ごとに選択することができます。従来、これは、

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

のように n 番目の要素をそれぞれ明示的に指定することによって実現されていましたが、:nth-child() セレクターを使用してこれを実現するより効率的な方法があります。

「:nth-child()」セレクターの使用

:nth-child() セレクターを使用すると、以下を構築できますn 変数を使用した算術式。これは、加算、減算、係数乗算を実行できることを意味します。

4 つおきの要素を選択するには、次のセレクターを使用します:

div:nth-child(4n)

この式は、すべての要素と一致することを意味します。つまり、0n、4n、8n などです。

異なる要素の処理Types

この式では、すべての子要素が同じ型であると仮定していることに注意することが重要です。 h1 や p など、異なる型の要素がある場合は、代わりに :nth-of-type() を使用する必要があります:

  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>

div:nth-of-type(4n)

1 から 0 までカウント

CSS では、n 変数は 0 からカウントされます。したがって、式 4n を使用すると、インデックス 0、4、8、 等々。 1 から数えたい場合は、代わりに 4n 1 という式を使用できます。

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