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


242

たとえば、一連の要素の4番目ごとの要素を選択することはできますか?

例:16個の<div>要素があります...次のように書くことができます。

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

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


1
初心者のためだけでなく、初心者のためだけに、みんながまだ生きていることを願って、n個の要素ごとに数量を選び、よりトリッキーなものを選択してください:nthmaster.com
gengns

回答:


419

名前が示すように、定数と変数を使用して算術式を作成できます。あなたは(また実行することができる)、減算()と、係数乗算(正の数、負の数、ゼロを含む整数である)を。:nth-child()n+-ana

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

div:nth-child(4n)

これらの算術式がどのように機能するかの説明については、私の答えを参照この質問だけでなく、スペックを

この回答は、同じ親要素内のすべての子要素が同じ要素タイプであると想定していることに注意してくださいdivh1またはなどの異なるタイプの他の要素があるp場合は、: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
...

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


私が付け加えると思ったのは、もしあなたが4番目だけのようなことをしているなら、あなたはそのような何かが必要になるでしょうtr td:nth-child(4)括弧内にnがないことに注意してください
WORMSS 2014

2
注:これは、要素セレクター(div、td、imgなど)でのみ機能し、.thisなどのクラスセレクターでは機能しません
Sliq

1
nth-child(n)の動作を視覚的に説明するインタラクティブなデモを作成しました:xengravity.com/demo/nth-child。w3仕様は、構文が許可されている初心者には特に気が遠くなることがわかりました。特に「字句スキャナー」セクション。
xengravity

1
@xengravity:共有してくれてありがとう!文法は、作者ではなく実装者を念頭に置いて記述されているため、初心者に優しいものではありません。仕様には、構文を記述する方法の例がいくつか提供されていますが、ビジュアルは付属していません。
BoltClock

1
私は、n番目の子表現を再生するために同様のツールを作っていますsalman-w.googlecode.com/svn/trunk/css/...
サルマンA



10

nth-child疑似クラスには正しい引数が必要です。

  • 引数は、bから始まるa 番目のan + bごとに一致する形式でなければなりません。

  • 両方a及びb任意の整数であり、双方は、ゼロまたは負とすることができます。

    • 場合はaゼロで、その後何もありません「すべての番目の子」句。
    • aが負の場合、マッチングはから逆方向に行われbます。
    • bがゼロまたは負の場合、正の値を使用して同等の式を記述できます。b例:はと4n+0同じ4n+4です。同様に4n-1と同じ4n+3です。

例:

4番目ごとの子を選択(4、8、12、...)

li:nth-child(4n) {
  background: yellow;
}
<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

1から始まる4番目ごとの子を選択(1、5、9、...)

4のグループから3番目と4番目の子をすべて選択します(3と4、7と8、11と12、...)

最初の4項目を選択(4、3、2、1)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.