title: How to select element that comes after certain DOM element
body: <p>Given the following markup:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
  
    &lt;div class=&quot;inner-wrapper&quot;&gt;
      &lt;div class=&quot;first&quot;&gt;
        &lt;div class=&quot;second&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;hr class=&quot;separator&quot;&gt;
  
  &lt;div class=&quot;inner-wrapper&quot;&gt;
      &lt;div class=&quot;first&quot;&gt;
        &lt;div class=&quot;second&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>How can i select class .first and .second AFTER the .separator?
  I have tried following:</p>
  <pre><code>.wrapper .separator + .inner-wrapper .first
  </code></pre>
  <p>However, it doesn't seem to work. I thought this reads something like this, from left to right:</p>
  <pre><code>Select &quot;.separator&quot; that has &quot;.wrapper&quot; as parent.
  Select &quot;.inner-wrapper&quot; that follows after &quot;.separator&quot;
  Select &quot;.first&quot; that follows &quot;.inner-wrapper&quot;
  </code></pre>
  <p>Since it's not working, i guess i'm misunderstanding the functionality of one of the selectors.
  Any help (or alternatives for that matter) is appreciated.</p>
  <p>PS:</p>
  <p>The Markup comes from an external source. While i could technically add a class with JS, i prefer not to if possible. I also tried playing around with the &quot;:not&quot; selectors, but i didn't get it to work either.</p>
  <p>Thanks</p>
  <p>Edit:</p>
  <p>In the screenshot, inside the &quot;header&quot; container, there is the same construct, so a container with inner-wrapper, first etc.
  <a href="https://i.stack.imgur.com/CdKej.png" rel="nofollow noreferrer">https://i.stack.imgur.com/CdKej.png</a></p>