:nth-child() を使用して CSS 内の N 番目ごとの要素を効率的に選択するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-22 10:26:40

オリジナル

511 人が閲覧しました

How Can I Efficiently Select Every Nth Element in CSS Using :nth-child()?

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() を使用する必要があります:

<body>
  <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>
</body>

ログイン後にコピー