Style every other div using nth-of-type selector with dividing divs

Question

I'm trying to alternate styling of elements using the CSS selector :nth-of-type but I'm not getting what I expected. I have a number of divs that are either "sections" or "dividers" and I want to style every other section with a different margin and background color.

Using :nth-of-type(even) doesn't select any of the sections I'm guessing because there is an element between them and that selector is only counting its index as a child. Seeing as my HTML starts with a section, its numbering would go 1-3-5-7. Changing the selector to (odd) makes all the sections turn green.

The image below shows what I'm trying to achieve. Can anyone help me do this without hard-coding a class like "right" and "left"? I'm looking to do this with pure CSS and the HTML I provided.

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even){
  background-color: lightgreen;
  margin-left: 50%;
}

<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>

Answer 1

There is no point in using :nth-of-type() because all your elements are div.

Use :nth-child() with 4n+3 instead.

Selects every fourth element starting at the third.

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-child(4n+3){
  background-color: lightgreen;
  margin-left: 50%;
}

<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>
<div class="divider"></div>
<div class="section"></div>

---

If you can change your markup, you can use nth-of-type targeting section elements.

.divider {
  width: 100%;
  border-bottom: 1px solid black;
}
.section {
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even) {
  background-color: lightgreen;
  margin-left: 50%;
}

<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>
<div class="divider"></div>
<section class="section"></section>

Answer 2

Why don't you just change the divider to horisontal rules? The div.divider serves no real purpose otherwise.

.divider{
  width: 100%;
  border-bottom: 1px solid black;
}
.section{
  width: 50%;
  height: 10vh;
  background-color: lightblue;
}
.section:nth-of-type(even){
  background-color: lightgreen;
  margin-left: 50%;
}
hr{
  border-width: 0 0 1px;
  margin: 0;
}

<div class="section"></div>
<hr class="divider">
<div class="section"></div>
<hr class="divider">
<div class="section"></div>
<hr class="divider">
<div class="section"></div>