After reviewing the provided html and css, I am puzzled as to why the parent container is being colored green while the child items remain uncolored. It seems like all div elements are being affected by the green color. What I actually want is for the parent container to be white, the odd children (awkward phrasing) to be green, and the even children to be 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>