nth-childを使用する5行のカラーブロック

Question

他のすべての5行グループに色を付けるためにnth-childを使用しようとしています。 以下のコードは動作しますが、そこに表示される合計行数は必ずしもわかりません。 彼らはいつも行数はなります何のためにこれを行うにはn番目の子を使用する方法はあり5.

http://jsfiddle.net/gbgcxo2p/

p:nth-child(n+8):nth-child(-n+12),:nth-child(n+18):nth-child(-n+22) { 
 
    background: #ff0000; 
 
}

<h1>This is a heading</h1> 
 
<p>The 1 paragraph.</p> 
 
<p>The 2 paragraph.</p> 
 
<p>The 3 paragraph.</p> 
 
<p>The 4 paragraph.</p> 
 
<p>The 5 paragraph.</p> 
 
<p>The 6 paragraph.</p> 
 
<p>The 7 paragraph.</p> 
 
<p>The 8 paragraph.</p> 
 
<p>The 9 paragraph.</p> 
 
<p>The 10 paragraph.</p> 
 
<p>The 11 paragraph.</p> 
 
<p>The 12 paragraph.</p> 
 
<p>The 13 paragraph.</p> 
 
<p>The 14 paragraph.</p> 
 
<p>The 15 paragraph.</p> 
 
<p>The 16 paragraph.</p> 
 
<p>The 17 paragraph.</p> 
 
<p>The 18 paragraph.</p> 
 
<p>The 19 paragraph.</p> 
 
<p>The 20 paragraph.</p> 
 
<p>The 21 paragraph.</p> 
 
<p>The 22 paragraph.</p> 
 
<p>The 23 paragraph.</p> 
 
<p>The 24 paragraph.</p> 
 
<p>The 25 paragraph.</p>

の倍数になりますか？

スコット

Answer 1

あなたがこの（より良い使用nth-of-type）を試すことができます。

p:nth-of-type(10n + 6), 
 
p:nth-of-type(10n + 7), 
 
p:nth-of-type(10n + 8), 
 
p:nth-of-type(10n + 9), 
 
p:nth-of-type(10n + 10) { 
 
    background: red; 
 
}

<h1>This is a heading</h1><p>The 1 paragraph.</p><p>The 2 paragraph.</p><p>The 3 paragraph.</p><p>The 4 paragraph.</p><p>The 5 paragraph.</p><p>The 6 paragraph</p><p>The 7 paragraph.</p><p>The 8 paragraph.</p><p>The 9 paragraph.</p><p>The 10 paragraph.</p><p>The 11 paragraph.</p><p>The 12 paragraph.</p><p>The 13 paragraph.</p><p>The 14 paragraph.</p><p>The 15 paragraph.</p><p>The 16 paragraph.</p><p>The 17 paragraph.</p><p>The 18 paragraph.</p><p>The 19 paragraph.</p><p>The 20 paragraph.</p><p>The 21 paragraph.</p><p>The 22 paragraph.</p><p>The 23 paragraph.</p><p>The 24 paragraph.</p><p>The 25 paragraph.</p>