title: Angularjs Protractor: Valid Selector for excluding nested elements
body: <p>I want to query on particular elements.</p>
  
  <p>My structure for code is as below:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="main"&gt;
      &lt;li&gt;...&lt;/li&gt;
      &lt;li&gt;...&lt;/li&gt;
      &lt;li&gt;
          &lt;ul class="to--exclude"&gt;
              &lt;li&gt;...&lt;/li&gt;
              &lt;li&gt;...&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;...&lt;/li&gt;
      ...
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want to test <code>li's</code> presence inside 'main<code>class but not for</code>li's<code>which are inside</code>to-exclude` class.</p>
  
  <p>The problem is if I use <code>element(by.css('.main li'))</code>, it will locate all the <code>li's</code> including the ones inside the <code>to-exclude</code> class.</p>
  
  <p>In <strong>Chrome's developer tools</strong>, I'm able to locate them exactly using JQuery's <code>:not</code> or <code>.not()</code>.</p>
  
  <pre><code>$('.main li').not('ul.to--exclude li')
  // OR
  $(".main li:not('ul.to-exclude li')");
  </code></pre>
  
  <p>While using it in <strong>protractor</strong> as</p>
  
  <pre><code>element(by.css('.main li').not('ul.to--exclude li'));
  // OR
  element(by.css(".main li:not('ul.to--exclude li')"));
  </code></pre>
  
  <p>The above code gives an error:</p>
  
  <pre><code>InvalidElementStateError: invalid element state: Failed to execute 'querySelectorAll' on 'Document': '.main li:not('ul.to--exclude li')' is not a valid selector.
  </code></pre>
  
  <p>How to accomplish the same in protractor. How to exclude some classes which are nested inside the parent locator class.</p>
  
  <p>Thanks</p>