Div inside Div stripe not working - html

Question

I am trying to create striped divs that are similar to a stripe spreadsheet. I am working on creating a format that relies on a table created by divs.
When I am trying to implement either nth-child or nth-of-type, I keep getting a broken output. Can somebody help me? I have been trying to find a solution but no avail.
This is my code.
HTML
<div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div>
on repeat...
CSS
.tab1 {
background-color: red;
}
.tab2 {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
.tab1:nth-child(odd) .tab2{
background-color: yellow;
}
http://jsfiddle.net/abnqo501/
edit:
It should be returning green, yellow, red then orange for the color stripes in that order.
If someone can help me scale this as well, that would be nice.
If I wanted to expand and add another div, such as
<div>
<div class="tab1">
1
<div>
2
</div>
</div>
</div>
how would I change the syntax? from div:nth-child(odd) > .tab1 tab2

Answer 1

As I said in the comment .tab1:nth-child(odd) will be always odd-numbered, because .tab1 is the only element in that level.
So you have to use this css:
div:nth-child(odd) > .tab1 .tab2{
background-color: yellow;
}
Have a look:
.tab1 {
background-color: red;
}
.tab2 {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
div:nth-child(odd) > .tab1 .tab2{
background-color: yellow;
}
<div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div><div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div><div>
<div class="tab1">
1
<div class="tab2">
2
</div>
</div>
</div>
<div>
<div class="tab1">
3
<div class="tab2">
4
</div>
</div>
</div>
Edit
After you edited your question, the code will be the following:
.tab1 {
background-color: red;
}
div:nth-child(even) > .tab1 > div {
background-color: orange;
}
div:nth-of-type(odd) .tab1 {
background-color: green;
}
.tab1:nth-child(odd) > div {
background-color: yellow;
}
<div>
<div class="tab1"> 1
<div> 2 </div>
</div>
</div>
<div>
<div class="tab1"> 3
<div> 4 </div>
</div>
</div>