Zebra Stripe using CSS

Question

I am trying to achieve the below stripe pattern, but none of the nth-child combination is working out. Any suggestion / solution to achieve this.

Answer 1

You can do it like this:

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

.child {
  flex-basis: 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>

The point is to see after how many div elements (.child) the pattern repeats, this is the first number or 4n, then just set the first and fourth to be of the same color with the +1 and +4.

Answer 2

You can do this using nth-of-type with n parameter (4n+1 and 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>