CSSを使用したZebra Stripe

Question

私は以下のストライプパターンを達成しようとしていますが、n番目の子供の組み合わせのどれもうまくいきません。これを達成するための提案/解決策。

Answer 1

あなたはこのようにそれを行うことができます。

.parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.child { 
 
    flex: 0 1 50%; 
 
    height: 25px; 
 
    background: #7F7F7F; 
 
} 
 

 
.child:nth-child(4n+1), 
 
.child:nth-child(4n+4) { 
 
    background: #FF0080; 
 
}

<div class="parent"> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
<div class="child"></div> 
 
</div>

ポイントはどのように多くのdiv年代（.child）のパターンが繰り返された後、確認することです、これはあります最初の番号または4nを入力し、最初と4番目を同じ色に設定して+1とにします0。

Answer 2

あなたはnパラメータ（4n+1と4n+4）

.container div { 
 
    color: #fff; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 

 
.container div:nth-of-type(4n + 1), 
 
.container div:nth-of-type(4n + 4) { 
 
    background-color: green; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
</div>