web-dev-qa-db-ja.com

CSSのN番目の要素ごとに選択

たとえば、一連の要素の4つおきに要素を選択することは可能ですか。

例：16個の<div>要素があります。

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

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

csscss3css-selectors
224
Derek Adair

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

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

div:nth-child(4n)

これらの算術式がどのように機能するかについての説明は、 この質問 、および spec に対する私の答えを参照してください。

この答えは、同じ親要素内のすべての子要素が同じ要素型divであることを前提としていることに注意してください。 h1やpのような異なるタイプの他の要素がある場合は、div要素だけを数えるために:nth-of-type()の代わりに:nth-child()を使う必要があります。

<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セレクタでこれをすることができないでしょう。私の答えを参照してください この質問 。

ちなみに:nth-child()に関しては4nと4n + 4の間に大きな違いはありません。 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
...

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

397
BoltClock
div:nth-child(4n+4)

参照してください： http://css-tricks.com/how-nth-child-works/

24
Tomalak

これを試してください

div:nth-child(4n+4)
12
Marko

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

  • すべての引数に一致するように、引数はan + bの形式にする必要があります。番目 bから始まる子.

  • aとbはどちらもオプションの整数で、どちらもゼロまたは負の値にすることができます。

    • aがゼロの場合、すべてのaは存在しません "番目 child "句.
    • 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、...）

li:nth-child(4n+1) {
  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>

4人（3と4、7と8、11と12、...）のグループから3番目と4番目の子供ごとに選択

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  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>

最初の4項目（4、3、2、1）を選択

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  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>
8
Salman A