CSS step over or skip alternating div class :nth-of-type or :nth-child
<p>Trying to select every third (speaker) div to clear the float where content is lumped in together.</p>

<p>Every second div is a modal popup &amp; it seems to conflict with nth-child or nth-of-type?</p>

<p>Please see example below where I have commented out the top row modal class.</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>.custom-speakers .speaker:nth-of-type(2n+1)
{
 clear:both;
 background:#FAFAFA;
 border:1px solid #FFF;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;STEP OVER EVERY MODAL NTH-CHILD / NTH-OF-TYPE&lt;/title&gt;

&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;


&lt;/head&gt;

&lt;body&gt;
&lt;div class="container"&gt;
    &lt;div class="row custom-speakers"&gt;
     &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 1&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 2&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 3&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 4&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 5&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 6&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 7&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 8&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 9&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 10&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 11&lt;/h2&gt;&lt;/div&gt;
        &lt;!--&lt;div class="modal fade"&gt;&lt;/div&gt;--&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;hr&gt;
    &lt;br&gt;
    &lt;div class="row custom-speakers"&gt;
     &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 1-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 2-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 3-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 4-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 5-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 6-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 7-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 8-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 9-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 10-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
        &lt;div class="speaker col-sm-6"&gt;&lt;h2&gt;SPEAKER 11-2&lt;/h2&gt;&lt;/div&gt;
        &lt;div class="modal fade"&gt;&lt;/div&gt;
    
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>