グループ化されたシーケンス：n番目の子

Question

ul,li { 
 
    display: block; 
 
    margin:0; 
 
    padding:0; 
 
    list-style:none; 
 
} 
 
li { 
 
    background: black; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
li:nth-child(2n+2) { 
 
    background: red; 
 
} 
 
li:nth-child(3n+3) { 
 
    background: green; 
 
} 
 
li:nth-child(4n+4) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
    <li>eleven</li> 
 
    <li>twelve</li> 
 
</ul>

私は必要なもの：

1. 黒
2. 赤
3. 緑
4. 青
5. 黒
6. 赤
7. 緑
8. 青
9. ...

...どのように私は:nth-childでこれを達成していますか？

Answer 1

あなたがそう4n+b

を使用して反復処理する必要がnth-child構文

:nth-child(<an-plus-b> ) 

与えられた、背景redため

は、それは、その上のどのよう4n+2、4x0+2、4x1+2、4x2+2こととなります要素2,6,10を与える

それはそう 4n+3、 4x0+3、 4x1+3、 4x2+3というように、あなたの要素3を与え、7、11

なり、背景'blueのために、それはそう4n+4、4x0+4、4x1+4、4x2+4になります背景​​のための

とその上で、あなたの要素4を与える、8、12

残りの要素1、5、9はli

であなたの財産を与えられ、デフォルトでblackに色付けされます

Answer 2

あなたはそれがインデックス2のために4N + 1 赤に対処することができ指数1,5および9のために黒を持っている必要としてあなたは、

を次のようにn番目の子を使用してそれを行うことができます6,10、それは4N + 2

チェックこのスニペット

ul, 
 
li { 
 
    display: block; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
li { 
 
    background: black; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
li:nth-child(4n+1) { 
 
    background: black; 
 
} 
 
li:nth-child(4n+2) { 
 
    background: red; 
 
} 
 
li:nth-child(4n+3) { 
 
    background: green; 
 
} 
 
li:nth-child(4n+4) { 
 
    background: blue; 
 
}

<ul> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
    <li>four</li> 
 
    <li>five</li> 
 
    <li>six</li> 
 
    <li>seven</li> 
 
    <li>eight</li> 
 
    <li>nine</li> 
 
    <li>ten</li> 
 
    <li>eleven</li> 
 
    <li>twelve</li> 
 
</ul>

i番目対処することができます

は、 `[ ＃の]