title: Selecting all elements up until reaching a specific one
body: <p>There is a container div which has other divs inside of it, these child divs contain text with some links in them. I'm trying to select all the anchor tags that are inside of this container div <strong>except</strong> for those that come <strong>after</strong> a child div which has a specific class to it.</p>
  
  <pre><code>&lt;div id="the_container"&gt;
  
   &lt;div&gt;
    some text &lt;a href="..."&gt;link&lt;/a&gt;
   &lt;/div&gt;
   &lt;div&gt;
    some text &lt;a href="..."&gt;link&lt;/a&gt;
   &lt;/div&gt;
   ... more regular divs below...
  
   &lt;div class="NOT_a_regular_child"&gt;
    this is not text
   &lt;/div&gt;
  
   &lt;div&gt;
    some text &lt;a href="..."&gt;link&lt;/a&gt;
   &lt;/div&gt;
   ... more divs come below...
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So, from the HTML above I'd like to select only the links before the div which class is "NOT_a_regular_child".</p>
  
  <p>I googled it but it seems like there isn't a selector for getting elements before another (?)</p>
  
  <p>I believe I could select all the child divs then loop through them and dump their links to an array until I reach that specific one but isn't there a way to do this using css selectors only?</p>
  
  <p>I cannot change the structure of the HTML because I'm just writing a google chrome extension to work on a existing web site.</p>