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

<p>Using <code>:nth-of-type(even)</code> 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 <code>(odd)</code> makes all the sections turn green.</p>

<p>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.</p>

<p><a href="https://i.stack.imgur.com/okCBw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/okCBw.png" alt="enter image description here"></a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="section"&gt;&lt;/div&gt;
&lt;div class="divider"&gt;&lt;/div&gt;
&lt;div class="section"&gt;&lt;/div&gt;
&lt;div class="divider"&gt;&lt;/div&gt;
&lt;div class="section"&gt;&lt;/div&gt;
&lt;div class="divider"&gt;&lt;/div&gt;
&lt;div class="section"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>