title: CSS Selector to match input not contained in a div with specific class?
body: <p>I have this situation</p>
  
  <pre><code>&lt;div class="hidden"&gt;
    &lt;input name="bar-foo" value="test"&gt; 
  &lt;/div&gt;
  &lt;div class="hidden"&gt;
    &lt;input name="bar-foo-baz" value="test2"&gt;
  &lt;/div&gt;
  &lt;div class="nothidden"&gt;
    &lt;input name="bar-foo" value="test3"&gt; &lt;!-- should be selected --&gt;
  &lt;/div&gt;
  &lt;div class="nothidden"&gt;
    &lt;input name="foo-bar-baz" value="test4"&gt; &lt;!-- should be selected --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to match inputs containing word foo and bar, not contained in a div which class is 'hidden'.</p>
  
  <pre><code>input[name*="foo"][name*="bar"] 
  </code></pre>
  
  <p>matches all the four inputs.</p>
  
  <pre><code>:not(.hidden) input[name*="foo"][name*="bar"]
  </code></pre>
  
  <p>in my opinion, should match inputs not contained in something with class '.hidden', but it doesn't. How do I achieve this result?</p>
  
  <p>Here is it a jsfiddle 
  <a href="https://jsfiddle.net/8dLbz5ws/1/" rel="nofollow noreferrer">https://jsfiddle.net/8dLbz5ws/1/</a></p>