title: How to select all elements, which do NOT have a child with a certain class?
body: <p>I'm using protractor for end-to-end tests of an Angular 2 app (and I suck at CSS).</p>
  
  <p>I'm stuck trying to select all elements, which do NOT have a (div) child with a certain class. They can have div children, just none with that class.</p>
  
  <p>The individual elements look (more or less) like this: </p>
  
  <pre><code>&lt;div class="card"
       (click)="clickEvent.emit(generator.id)"&gt;
  
      &lt;div id="card-title-anchor"&gt;
  
          &lt;div class="card-img-top"&gt;
               &lt;img src="{{generator.imageUrls.small}}"&gt;
          &lt;/div&gt;
  
          &lt;div *ngIf="!canFulfillAAC()" class="sold-overlay"&gt;
              &lt;p&gt;bla&lt;/p&gt;
          &lt;/div&gt;                  
  
          &lt;div class="col-3 price-overlay"&gt;
              &lt;p class="big-price"&gt;
                  bla
              &lt;/p&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can get all the "<code>.card</code>" elements with <code>element.all(by.css('.card'))</code>.</p>
  
  <p>But how do I get only the ones , which do not include a child div with the <code>sold-overlay</code> class?</p>
  
  <p><em>EDIT</em>:
  I removed the css tags. I mainly care about how to achieve this with protractor locators - be it through a css selector, xpath expression or otherwise.</p>