回答:
名前が示すように、定数と変数を使用して算術式を作成できます。あなたは(また実行することができる)、減算()と、係数乗算(正の数、負の数、ゼロを含む整数である)を。:nth-child()
n
+
-
an
a
上記のセレクターリストを書き換える方法は次のとおりです。
div:nth-child(4n)
これらの算術式がどのように機能するかの説明については、私の答えを参照この質問だけでなく、スペックを。
この回答は、同じ親要素内のすべての子要素が同じ要素タイプであると想定していることに注意してくださいdiv
。h1
またはなどの異なるタイプの他の要素がある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
...
ご覧のとおり、両方のセレクターが上記と同じ要素に一致します。この場合、違いはありません。
tr td:nth-child(4)
。括弧内にnがないことに注意してください
div:nth-child(4n+4)
nth-child
疑似クラスには正しい引数が必要です。
引数は、bから始まるa 番目の子an + b
ごとに一致する形式でなければなりません。
両方a
及びb
任意の整数であり、双方は、ゼロまたは負とすることができます。
a
ゼロで、その後何もありません「すべての番目の子」句。a
が負の場合、マッチングはから逆方向に行われb
ます。b
がゼロまたは負の場合、正の値を使用して同等の式を記述できます。b
例:はと4n+0
同じ4n+4
です。同様に4n-1
と同じ4n+3
です。例:
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>