☰

CSSでN番目ごとに要素を選択する 質問する

tag-icon • tag-icon css css-selectors
CSSでN番目ごとに要素を選択する 質問する

たとえば、要素セット内の 4 つおきの要素を選択することは可能ですか?

例: 要素が 16 個ある場合<div>、次のように記述できます。

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

これを行うより良い方法はありますか?

ベストアンサー1

名前が示すように、定数に加えて変数を使用して算術式を作成できます。加算（ ）、減算（）、および:nth-child()n+-係数乗算(anはa正の数、負の数、ゼロを含む整数です)。

上記のセレクター リストを書き換える方法は次のとおりです。

div:nth-child(4n)

これらの算術式がどのように機能するかについては、私の回答を参照してください。この質問、そしてスペック。

この回答では、同じ親要素内のすべての子要素が同じ要素タイプ であると想定していることに注意してください。やdivなどの異なるタイプの他の要素がある場合は、の代わりにを使用して、要素のみがカウントされるようにする必要があります。h1p:nth-of-type():nth-child()div

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

その他すべて（クラス、属性、またはこれらの組み合わせ）では、任意のセレクタに一致するn番目の子を探すことになりますが、純粋なCSSセレクタではこれを行うことはできません。この質問。

ちなみに、 に関しては 4n と 4n + 4 の間に大きな違いはありません:nth-child()。 変数を使用するとn、0 からカウントが始まります。各セレクターが一致するのは次のようになります。

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

ご覧のとおり、両方のセレクターは上記と同じ要素に一致します。この場合、違いはありません。

おすすめ記事