My divs are not being colored correctly

Given the following html and css I can’t see why the parent is turning green and each child item is not being colored at all, or it might be that all div’s including the parent and being colored green. When I want is for the parent to remain white, the odd children (that sounds wrong) to be colored green and the even children to be colored blue.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
    .flexParent {
      display:-ms-flexbox;
      -ms-flex-direction:row;
      -ms-flex-pack:start;
      -ms-flex-wrap:wrap;
      border-style:dashed;
      border-color:purple;
    }
    .flexParent > div {
      -ms-flex:none;
     max-width: 50px;
     max-height: 50px;
    }
    .flexParent:nth-child(odd) {
      background-color:green;
    }
    .flexParent:nth-child(even) {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="flexParent">
    <div>Child1</div>
    <div>Child2</div>
    <div>Child3</div>
    <div>Child4</div>
    <div>Child5</div>
    <div>Child6</div>
    <div>Child7</div>
    <div>Child8</div>
  </div>
</body>
</html>

solution

You would use :nth-child() on the direct child div elements as oppose to the parent element.

Therefore .flexParent:nth-child(even)

..would be .flexParent > div:nth-child(even)

EXAMPLE HERE

.flexParent > div:nth-child(odd) {
  background-color: green;
}

.flexParent > div:nth-child(even) {
  background-color: blue;
}