Zebra Stripe mit CSS

Question

Ich versuche, das folgende Streifenmuster zu erreichen, aber keine der N-Kind-Kombination funktioniert. Jeder Vorschlag/jede Lösung, um dies zu erreichen.

Answer 1

Sie können es wie folgt tun:

.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>

Der Punkt ist, nach wie vielen div ‚s (.child) das Muster wiederholt, um zu sehen, ist dies die erste Nummer oder 4n, dann stellen Sie die erste und vierte mit der gleichen Farbe mit der +1 und +4.

Answer 2

Sie können dies mit nth-of-type mit n Parameter (4n+1 und 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>